The previous timeline project used THE V3 version of D3JS. Today, I will upgrade to the V5 version when I have time and learn the new writing method.

Change the reference to D3 first, the current version is V5.9.7

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

There were only two changes involved in the project:

1. Processing after CSV import

V3:

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

v5:

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

2. Dom element attr adds attributes. V5 attR can only get/set one attribute at a time

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'
			  })
Copy the code

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');
Copy the code