"D3.js Starter Series---6" How to make a mobile chart

My personal blog is: www.ourd3js.com

CSDN Blog for: blog.csdn.net/lzhlzz

Reprint please indicate the source, thank you.

[5.1] A better chart is produced in the section. But it is static. Want to make a dynamic effect on it? In D3, just a few lines of code are needed.

This section will cover the use of 4 functions.

1.transition ()

The effect of starting the transition is just to add it.

Add it between the two states. Like what:

. 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 you want to change from red to blue. D3 will take the initiative to linearly interpolate the values between colors and finally see a smooth color change in the animation.

2.duration ()

Specifies how long the entire transition lasts. The unit is in milliseconds. such as. Duration (2000). is sustained for 2000 milliseconds. That's 2 seconds.

3.ease ()

The way you specify transitions, the way you often use them is:

1. Linear normal linear variation
2. Circle slowly reaches the last state of the transformation
3. Elastic with bouncing reach finally state
4. Bounce bouncing a few times at the last 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 is initiated and the unit is the same in milliseconds. This function can specify a delay for the population. You can also specify a delay for an individual.
For general designations, such as:

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

This is specified. Will delay 500 milliseconds to play a 1000-millisecond animation. Therefore, the entire animation length is 1500 milliseconds.

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

If this is specified, if there are 10 elements, then the 1th element is not deferred (because i = 0), then the 2nd element is delayed by 200 milliseconds, 3rd is delayed by 400 milliseconds, and so on .... The length of the entire animation is 200* (10-1) + 1000 = 2800 milliseconds.

The above four functions need to be used to make the transition effect, usually in the form of:

. 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

Copyright notice: This article blog original article. Blogs, without consent, may not be reproduced.

"D3.js Starter Series---6" How to make a mobile chart