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

My personal blog is: www.ourd3js.com

CSDN Blog for: blog.csdn.net/lzhlzz

Reprint please indicate the source, thank you.

[5.1] section of the production of a relatively perfect chart, but it is static, want to make its dynamic effect? Only a few lines of code are required in the D3.

This section will cover the use of 4 functions.

1.transition ()

You only need to add this to start the transition effect. Add it between two states, for example:

. attr ("Fill", "red"). Transition (). attr ("Fill", "Steelblue")

As the above code, the top and bottom two properties fill the color of different, add a row in the middle. Transition (), which indicates that to change from red to blue, D3 automatically interpolates the values between the colors, eventually seeing a smooth color change in the animation.

2.duration ()

Specifies how long the entire transition lasts, in milliseconds. such as. Duration (2000), is sustained for 2000 milliseconds, or 2 seconds.

3.ease ()

Specifies the way in which transformations are used, often in ways that:

1. Linear normal linear variation
2. Circle slowly gets to the final state of the transformation
3. Elastic with bouncing to reach final state
4. Bounce bounce several times in the final state

Called when the shape is:. Ease ("bounce")

4.delay ()

Specifies the time of the delay, which indicates a certain amount of time before the transition starts, and the units are also milliseconds. This function can specify a delay for the whole, or it can specify a delay for the individual.
When specified for the whole, such as:

. Transition (). Duration (+). Delay (500)

This specifies that a 1000-millisecond animation will be delayed for 500 milliseconds, so the entire animation length is 1500 milliseconds.

. Transition (). Duration (+). Delay (funtion (d,i) {    return 200*i;})

If this is specified, suppose there are 10 elements, then the 1th element is delayed by 200 milliseconds, the 2nd is delayed by 400 milliseconds, and so on .... The length of the entire animation is 200*10 + 1000 = 3000 milliseconds.

To make the transition effect requires the above four functions, when actually used, usually shaped like:

. Transition (). Duration. Ease ("bounce"). Delay (function (d,i) {return 200*i;})

The initial state and the target State of the transition effect before and after.

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