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');