[6] How to move a chart in D3.js

 

[5.1] a relatively complete chart is created, but it is static. Do you want to make its dynamic effect? In D3, you only need a few lines of code.

This section involves the use of four functions.

1. transition ()

You only need to add this to start the transformation effect. Add it to two States, for example:

 

.attr(fill,red).transition().attr(fill,steelblue)

As shown in the preceding code, the colors of fill in the upper and lower attributes are different. Add a row in the middle. transition () indicates that the color will change from red to blue. D3 will automatically perform linear interpolation of values between colors, and finally see smooth color changes in the animation.

 

2. duration ()

Specifies the duration of the entire transition, in milliseconds. For example, the. duration (2000) duration is 2000 milliseconds, that is, 2 seconds.

3. Merge ()

Specify the conversion method. Common conversion methods include:

The general linear change of linear circle slowly reaches the final state of the transformation. elastic has a bounce arrival final state. bounce is used to bounce several times at the final state, for example,. Round ("bounce ")

 

4. delay ()

Specify the delay time, indicating that the conversion starts after a certain period of time, in the same unit as milliseconds. This function can specify the overall latency or individual latency.
Overall timing, such:

 

.transition().duration(1000).delay(500)

If this parameter is specified, an animation with a latency of 500 milliseconds is played, so the length of the animation is 1000 milliseconds.

 

 

.transition().duration(1000).delay(funtion(d,i){    return 200*i;})

If there are 10 elements, the latency of 1st elements is 200 milliseconds, and the latency of 2nd elements is 400 milliseconds, and so on .... The length of the animation is 200*10 + 1000 = 3000 milliseconds.

 

 

The above four functions are required to create a transformation effect. The actual usage is usually shown as follows:

 

.transition().duration(3000).ease(bounce).delay(function(d,i){return 200*i;})

The initial status and target status of the frontend and backend transition results.

 

 

Actual Effect visible: http://www.ourd3js.com/demo/transition.html