文章目录
日记
12.7
- 任务:根据d3和vega-lite画图
- 过程
- 引入:在文档的usage部分找NPM的引入方式,这里要到vega,vega-lite,vega-embed这三个NPM页面仔细看一下。文档tutorial部分是指导,examples部分可以找到很多示例,doc部分是所有文档以及API
- 示例:例子多是JSON写法,可以转用JS的对象写法,用prettier直接格式化,或者JSON.parse()也可
- 问题:用JS对象写法不稳定,图像经常消失,而且对于数字7这个库的显示有异常
- 数据转换:文档里多是用csv等格式的文件,源文件可以右键图像直接看,也可以去找他们的git仓库下载
- 画图:
1)encoding是主要部分
2)mark选项的point决定是否显示点
3)axis的label系列能输入间隔 - 结果:vega-lite VS echarts
下面echarts其实是有x轴刻度的,图没截全而已。
12.8
- 任务:根据vega-lite寻找项目需求点的实现
- 颜色自定义
- 自定义DOM渲染tooltip
- 点击legend,其他legend全隐藏
- 过程
- 颜色自定义
1)Mark Property Channels,可以找到Color Scheme
2)Color Scheme,可以找到关于颜色range数组自定义的内容 - 自定义DOM渲染tooltip
1)Tooltip,是关于tooltip的说明
2)API view,是关于vega的viewAPI的说明,有自定义挂载DOM的API - 点击隐藏legend
1)interactive_legend,响应式legend的example
2)interactive_line_hover,另一个响应鼠标hover事件的响应式图像(非legend)的example - 插曲:吐槽
这个库的配置,在文档找一个具体的内容,要找很久,这段时间找的我心情有点差,而且各种配置的嵌套方式不尽相同,带来了很多困难。包括找他们导入的csv源文件,也是找了好几个页面才找到git仓库
12.9
-
任务:自定义DOM渲染tooltip,点击legend曲线显示其他的
-
过程
- legend点击显示是库自带的固定选择器,反向选择根据库是做不到的
- 自定义渲染DOM还是失败
- 插曲:吐槽文档难读,leader劝告我把文档看完了再编码,不然你只会更痛苦,痛苦感一点都不会减轻
12.10
- 任务:自定义DOM渲染tooltip
- 过程
- 导入
一开始发现import不成功,只能用require
后来发现vega这个库可以从vega-embed解构导出来,vega则是default,default和解构同时导入 - runtime错误
看了文档,runtime在viewAPI页面并没有说明,看了文档前后文才知道,runtime就是用它们自己的API将整个图像设置parse后的值 - 找不到子DOM
目前是个无解问题
- 任务:修bug
- 过程
- bug1:邮件通知没加空校验。这里挪用项目其他地方的校验逻辑,大概是从veeValidation库里拿require过来,然后设立一个插槽就可
- bug2:脚本配置错误。这里在后端是一个单例模式,前端根据后端字段判断出错了,本来有内容,但是逻辑判断判断成了没内容。然后也加了和bug1一样的空校验,ok了。
12.11
- 任务:自定义DOM渲染tooltip
- 过程
- 任务鸽子了:因为实在不会,做不掉
- 时间拿去做编译原理实践作业了:词法分析getsym(),语法分析statement(),expression(),term(),factor(),虚拟机指令生成中间代码。实现扩展点:+±-运算符、const常量、odd判断奇偶内置函数。
周报
本周:
- DXMON-619
- DXMON-620
- 调研vega-lite库
下周:
- 寻找vega-lite替换echars方案