之前一个时间轴的项目用的是d3js的v3版，今天有空就升级到v5版，学习一下新的写法。

先把d3的引用改一下，目前版本号是 v5.9.7

<script src="https://d3js.org/d3.v5.min.js"></script>

该项目里涉及到的更改最终只有两处：

1.csv导入后的处理

v3：

d3.csv("assets/cc72-2.csv", function(data) {
    console.log(data); 
    ...
})

v5:

d3.csv("assets/cc72-2.csv").then(function(data) {
    console.log(data); 
    ...
})

2.dom元素attr添加属性，v5的attr一次只能get/set一个属性

v5 API: selection.attr - get or set an attribute.

v3：

var videoBody = mediaNode.append('div')
              .classed('videobody',true)
var theVideo = videoBody.append('video')
              .attr({
                'id':'video'+nodeIndex,
                'controls':'controls',
                'preload':'auto'
              })
              .append('source')
              .attr({
                'src':'media/'+d.nodeVideo,
                'type':'video/mp4'
              })

v5:

var videoBody = mediaNode.append('div')
              .classed('videobody',true)
var theVideo = videoBody.append('video')
              .attr('src', 'media/'+d.nodeVideo)
              .attr('id', 'video'+nodeIndex)
              .attr('controls', 'controls')
              .attr('preload', 'auto');