Understanding Update, Enter, Exit in D3.js

What is Update, Enter, Exit?

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

This code uses the situation when the following conditions occur:

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.

Through this picture can be very clear to know

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

The meaning of this code, there is no rect element in SVG, that is, the number of elements is 0, there is an array dataset, the array with the number of elements of the selection set of 0 binding, select its enter part, and then add (append) element, that is, add enough elements, So that each of the data has elements corresponding to it

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.

var DataSet = [3, 6, 9, 12, 15];//Select the P element in body var p = d3.select ("Body"). SelectAll ("P");//Get update part var update = P.dat A (DataSet);//Get Enter part var enter = Update.enter ();//update part: Update property value Update.text (function (d) {    return "update" + D ;});/ /enter: Adds an element and assigns the attribute value Enter.append ("P")    . Text (function (d) {        return "enter" + D;    });

The results are as follows:

Update 3

Update 6

Update 9

Enter 12

Enter 15

So:

The update section is generally handled by updating the property value

The method of handling the Enter section is typically to assign the attribute value after adding the element

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.

var dataset = [3];//Select the P element in body var p = d3.select ("Body"). SelectAll ("P");//Get update part var update = P.data (DataSet);//Get EX It part var exit = Update.exit ();//update part processing: Update attribute value Update.text (function (d) {    return "update" + D;}); /exit: Modify the properties of the P element Exit.text (function (d) {        return "exit";    }); The processing of the/exit section is usually the removal of elements//exit.remove ();

In order to indicate which part is exit, there is no deletion of the extraneous elements, but the majority of the operations in the exit section are actually deleted.

The results are as follows:

Update 3

Exit

Exit

Understanding Update, Enter, Exit

in D3.js