Vue整合d3.v5.js制作--折线图(line)

先上效果图（x轴固定为时间轴）：

图中出现的悬浮框是鼠标悬停效果

 

1、环境说明：

vue版本："vue": "^2.5.2"
d3版本："d3": "^5.9.1"

2、Line.vue源码

  1 
  5 
  6 
138 
139 

3、使用示例

 1 
 7 
 8 
38 
39 

4、参考资料

https://github.com/d3/d3-scale-chromatic/blob/master/README.md#schemeCategory10

https://github.com/d3/d3-time-format#format

https://jakearchibald.com/2013/animated-line-drawing-svg/

 

转载于:https://www.cnblogs.com/floud/p/10684839.html