D3js v3 更新到 v5的代码改写

1,241 阅读1分钟

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