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

First, what is Update, Enter, Exit

Svg.selectall ("rect")   // Select all 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 this method to add enough elements when there are data, and there are not enough graphic elements.

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.

　　

Ii. 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, 12, 15 ];//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; });

As a result, the data that is bound by the Update section and the Enter section is clearly represented.

　　　

Please remember:

• • The update section is handled in the following way: Updating property values
  • The Enter section is handled in the following way: When an element is added, the property value is assigned

Iii. 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 ();

The results are as follows, please distinguish between the Update section and the Exit section. 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.

　　

Please remember:

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

D3.js Understanding Update, Enter, Exit