『前端实习笔记』12月 第2周
作者：互联网
文章目录
日记
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方案
标签：12,自定义,DOM,笔记,lite,vega,文档,实习,legend 来源： https://blog.csdn.net/GLZX_HM/article/details/111684448