D3js-v3-更新到-v5的代码改写

之前一个时间轴的项目用的是 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');