D3.js Series--understanding of dynamic effects and update, Enter, exit

first, the dynamic effect

D3 supports the production of dynamic charts. Sometimes, the changes in the chart need to occur slowly, so that the user can see clearly the process of change, but also to the user a small sense of friendliness.

1. What is dynamic effect

The chart that you made earlier is a static chart that appears overnight and then does not change after the drawing is complete.

　　A dynamic chart is a chart that changes in a certain time period, which may be the shape, color, position, etc., and the user can see the process of change. For example, there is a circle with a center point of (100, 100). Now we want the x coordinate of the circle to move from 100 to 300, and the move takes place within 2 seconds. This is a time to use dynamic effects, which we call transitions (transition)in D3.

2, the realization of dynamic methods

D3 provides 4 ways to make a transition to a graph: from state A to state B.

Transition ()

Starts the transition effect. Before and after the shape changes before and after the State (shape, position, color, etc.), such as:

. attr ("fill","red")         // initial color is red . Transition ()               // start transition . attr ("fill","  Steelblue")   // end color is iron blue

D3 automatically interpolates the color values (RGB values) between the two colors (red and iron blue) to get the color value for the transition. We don't need to know how the middle is calculated, just enjoy the results.

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 ($)

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) {    return200 *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.

3, to achieve simple dynamic effect

    varWidth= -, height= -; varSVG = D3.Select("Body"). Append ("svg"). attr ("width", width). attr ("Height", height); varCircle=svg.append ("Circle"). attr ("CX", -). attr ("Cy", -). attr ("R", -). Style ("Fill","Green"); Circle.transition (). Ease ("Bounce")//End Bounce. Duration ( -)//transition duration 2s. attr ("CX", -)//Center coordinates changed from 100 to. attr ("R", -)//radius changed to. Style ("Fill","Red")//Color turns red. Delay ( +);//delay 1s execution

ii. Understanding Update, Enter, Exit

Update, Enter, Exit are three very important concepts in D3, which deal with situations where the selection set and the number of data relationships are uncertain.

1. What is Update, Enter, Exit

In the first few chapters, the following code appears repeatedly.

Svg.selectall ("rect")   // Select all rectangles within SVG    . Data (DataSet)      // an array of bindings    . Enter ()            // Specify the Enter portion of the selection set    . Append ("rect")     // add a sufficient number of rectangular elements

As mentioned earlier, this code is used when the following conditions occur: when there is data, and there are not enough graphic elements, use this method to add enough elements. there was no way to delve into the meaning of this code, which is explained in this chapter. However, because this is a relatively complex issue, this chapter only provides the most preliminary introduction.

Assuming that there are three P elements in the body, there is an array [3, 6, 9], you can bind each item in the array to a P element, respectively. However, there is one problem: when the length of an array is inconsistent with the number of elements (array length > number of elements or array length < number of elements) ? At this point, you need to understand the concept of Update, Enter, Exit. If the array is [3, 6, 9, 12, 15], the array is bound to the selection set of three P-elements. As you can imagine, there will be two data with no element corresponding to it, when D3 will create two empty elements corresponding to the data, this part is called Enter. The part that has elements that correspond to the data is called Update. If the array is [3], then there will be two elements without data binding, then the part with no data binding is called Exit. as shown below.

Seeing this, I think you can see why the code at the very beginning of this section can add a sufficient number of elements to SVG. The meaning of it is actually:

At this time there is no rect element in SVG, that is, the number of elements is 0. With an array of datasets that bind the array to a selection set of 0 elements , select its Enter section (look closely), and then add the (append) element, which is to add enough elements so that each of the data has elements corresponding to it.

2. Use of Update and Enter

When the corresponding element is insufficient (bound data quantity > corresponding element), the element (append) needs to be added.

Now there are three P elements in the body, to bind an array of length greater than 3 to the selection set of p, and then handle the update and enter two parts respectively.

varDataSet = [3,6,9, A, the ]; //Select the P element in bodyvarp = D3.Select("Body"). SelectAll ("P"); //Get the Update sectionvarUpdate =p.data (dataset);//get the Enter sectionvarEnter =Update.enter ();//handling of the update section: Updating property valuesUpdate.text (function (d) {return "Update"+D;}); //Processing of the Enter section: Assigning a property value after adding an elementEnter.append ("P"). Text (function (d) {return "Enter"+D; });

Please remember:

The update section is handled in the following way: Updating property values

The Enter section is typically handled by adding an element before assigning the property value

3. Use of Update and Exit

When the corresponding element is too large (the number of bound data < corresponding element), you need to delete the extra elements.

Now there are three P elements in the body, to bind an array of length less than 3 to the selection set of p, and then handle both the update and exit respectively.

varDataSet = [3 ]; //Select the P element in bodyvarp = D3.Select("Body"). SelectAll ("P"); //Get the Update sectionvarUpdate =p.data (dataset);//Get exit SectionvarExit =update.exit ();//handling of the update section: Updating property valuesUpdate.text (function (d) {return "Update"+D;}); //handling of the exit section: Modifying the properties of the P elementExit.text (function (d) {return "Exit"; }); //The exit section is typically handled by deleting elements//Exit.remove ();

Please remember:

The exit section is typically handled by deleting the element (remove)

D3.js Series--understanding of dynamic effects and update, Enter, exit