D3.js: Dynamic effects

D3 provides 4 ways to make a transition to a graph:

-Transition ()

Starts the transition effect, before and after the shape changes before and after the state (shapes, positions, colors, and so on), such as:

. attr ("Fill", "red")         // initial color is red . Transition ()               // start transition . attr ("Fill", " Blue ")       // End Color

D3 automatically interpolates the color values (RGB values) between the two colors (red and blue) to get the color value for the transition.

-Duration ()

Specifies the duration of the transition, in milliseconds.

such as Duration (2000), refers to a duration of 2000 milliseconds, that is, 2 seconds.

-Ease ()

Specifies the way in which transitions are used, commonly:

• Linear: normal linear variation
• Circle: Get to the final state of the transformation slowly
• Elastic: Reaching final state with bounce
• Bounce: Bounce several times in the final state

When called, the format is as follows: Ease ("bounce").

-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.

For example, when the whole is specified:

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

Thus, the overall graph changes after a delay of 500 milliseconds, with a change of 1000 milliseconds. Therefore, the total duration of the transition is 1500 milliseconds.

Another example is when you specify a graphic (the data is bound to a graph):

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

So, assuming there are 10 elements, then the 1th element is delayed by 0 milliseconds (because i = 0), the 2nd element is delayed by 200 milliseconds, the 3rd delay is 400 milliseconds, and so on .... The length of the transition is 200 * 9 + 1000 = 2800 milliseconds.

1. Achieve simple dynamic effects

The following will add three circles to the SVG canvas and start the transition immediately after the circle appears.

// Canvas Size var width = $, height = $; // add an SVG canvas to the body var svg = d3.select ("Body").    Append ("SVG")    . attr ("width", width)    . attr ("height", height);

-First circle, required to move x-coordinate

var circle1 = svg.append ("Circle").        attr ("CX").        attr ("Cy").        attr ("R", "G")        . Style ("Fill", "green"); // changes the center coordinate from 100 to 1 seconds (1000 milliseconds) circle1.transition ()    . Duration()    attr ("CX", 300);

-The second circle, which requires both moving the x-coordinate and changing the color

var circle2 = svg.append ("Circle").        attr ("CX").        attr ("Cy").        attr ("R", "G")        . Style ("Fill", "green"); // in 1.5 seconds (1500 milliseconds), the center coordinates are changed from 100 to // Change color from green to red circle2.transition ()    . Duration(()    attr ("CX").    Style (" Fill "," red ");

-A third circle, which requires moving the x-coordinate, changing the color, and changing the radius

varCircle3 = Svg.append ("Circle"). attr ("CX", 100). attr ("Cy", 100). attr ("R", 45). Style ("Fill", "green");//changes the center coordinate from 100 to 2 seconds (2000 milliseconds)//Change color from green to red//Change the radius from 45 to//transition mode with bounce (bounce several times at the end point)circle3.transition (). Duration (2000). Ease ("Bounce"). attr ("CX", 300). attr ("R", 25). Style ("Fill", "red");

D3.js: Dynamic effects