『前端实习笔记』12月 第2周

文章目录

日记


12.7

  • 任务:根据d3和vega-lite画图
  1. d3
  2. d3 API
  3. vega-lite
  4. vega-lite API
  • 过程
  1. 引入:在文档的usage部分找NPM的引入方式,这里要到vega,vega-lite,vega-embed这三个NPM页面仔细看一下。文档tutorial部分是指导,examples部分可以找到很多示例,doc部分是所有文档以及API
  2. 示例:例子多是JSON写法,可以转用JS的对象写法,用prettier直接格式化,或者JSON.parse()也可
  3. 问题:用JS对象写法不稳定,图像经常消失,而且对于数字7这个库的显示有异常
  4. 数据转换:文档里多是用csv等格式的文件,源文件可以右键图像直接看,也可以去找他们的git仓库下载
  5. 画图:
    1)encoding是主要部分
    2)mark选项的point决定是否显示点
    3)axis的label系列能输入间隔
  6. 结果:vega-lite VS echarts
    『前端实习笔记』12月 第2周
    下面echarts其实是有x轴刻度的,图没截全而已。


12.8

  • 任务:根据vega-lite寻找项目需求点的实现
  1. 颜色自定义
  2. 自定义DOM渲染tooltip
  3. 点击legend,其他legend全隐藏
  • 过程
  1. 颜色自定义
    1)Mark Property Channels,可以找到Color Scheme
    2)Color Scheme,可以找到关于颜色range数组自定义的内容
  2. 自定义DOM渲染tooltip
    1)Tooltip,是关于tooltip的说明
    2)API view,是关于vega的viewAPI的说明,有自定义挂载DOM的API
  3. 点击隐藏legend
    1)interactive_legend,响应式legend的example
    2)interactive_line_hover,另一个响应鼠标hover事件的响应式图像(非legend)的example
  4. 插曲:吐槽
    这个库的配置,在文档找一个具体的内容,要找很久,这段时间找的我心情有点差,而且各种配置的嵌套方式不尽相同,带来了很多困难。包括找他们导入的csv源文件,也是找了好几个页面才找到git仓库


12.9

  • 任务:自定义DOM渲染tooltip,点击legend曲线显示其他的

  • 过程

  1. legend点击显示是库自带的固定选择器,反向选择根据库是做不到的
  2. 自定义渲染DOM还是失败
  3. 插曲:吐槽文档难读,leader劝告我把文档看完了再编码,不然你只会更痛苦,痛苦感一点都不会减轻

12.10

  • 任务:自定义DOM渲染tooltip
  • 过程
  1. 导入
    一开始发现import不成功,只能用require
    后来发现vega这个库可以从vega-embed解构导出来,vega则是default,default和解构同时导入
  2. runtime错误
    看了文档,runtime在viewAPI页面并没有说明,看了文档前后文才知道,runtime就是用它们自己的API将整个图像设置parse后的值
  3. 找不到子DOM
    目前是个无解问题

  • 任务:修bug
  • 过程
  1. bug1:邮件通知没加空校验。这里挪用项目其他地方的校验逻辑,大概是从veeValidation库里拿require过来,然后设立一个插槽就可
  2. bug2:脚本配置错误。这里在后端是一个单例模式,前端根据后端字段判断出错了,本来有内容,但是逻辑判断判断成了没内容。然后也加了和bug1一样的空校验,ok了。


12.11

  • 任务:自定义DOM渲染tooltip
  • 过程
  1. 任务鸽子了:因为实在不会,做不掉
  2. 时间拿去做编译原理实践作业了:词法分析getsym(),语法分析statement(),expression(),term(),factor(),虚拟机指令生成中间代码。实现扩展点:+±-运算符、const常量、odd判断奇偶内置函数。

周报


本周:

  • DXMON-619
  • DXMON-620
  • 调研vega-lite库

下周:

  • 寻找vega-lite替换echars方案
上一篇:基于Linux Lite 4.8制作“Windows 12 Lite”正式发布


下一篇:一起了解 .Net Foundation 项目 No.5