Home > Developer > Web Develop
[D3.js selection set and data details-4] processing method and processing template of enter and exit, d3.jsexit
After data is bound, the selection set is divided into three parts: update, enter, and exit. What are the solutions for these three parts? This article describes the processing method and a common processing template.
1. How to Deal with enterIf there are not enough elements, the processing method is usually to add elements using append. See the following code:
<Body> <p> </p> <script> var dataset = [3, 6, 9]; var p = d3.select ("body "). selectAll ("p"); // After binding data, obtain the var update = p. data (dataset); var enter = update. enter (); // The update method is to directly modify the content update. text (function (d) {return d ;}); // you can add an element and then modify the content "enter. append ("p "). text (function (d) {return d ;}); </script> </body>
In this example, there is only one p element in the body, but there are three data, so the enter part contains two additional data. The Processing Method for excess data is the append element. After processing, the body contains three p elements:
<p>3</p><p>6</p><p>9</p>
Generally, after reading a file from a server, there is data, but there is no element in the webpage. This is a very important feature of D3. You can select an empty set and then use enter (). append () to insert elements. If no p element exists in the body, see the following code:
Var dataset = [10, 20, 30, 40, 50]; var body = d3.select ("body"); body. selectAll ("p") // select all p in the body, but an empty set is selected because no p exists. data (dataset) // bind the dataset array. enter () // return the enter part. append ("p") // Add the p element. text (function (d) {return d ;});
In the above Code, selectAll selects an empty set and binds the data. Because the selection set is empty, the update part returned by data () is empty. Then, call enter () and append () so that each data has a corresponding element p. Finally, change the content of the p element. That is to say, the common solution for the enter part is to use append () to add elements.
2. How to Deal with exitThere are more elements and no data corresponds to them. For such an element, you can use remove () to delete the element. If the body contains five p elements, see the following code:
Var dataset = [10, 20, 30]; var p = d3.select ("body "). selectAll ("p"); // After binding data, obtain the update part and exit part var update = p. data (dataset); var exit = update. exit (); // The update method is to modify the content update. text (function (d) {return d ;}); // you can delete exit. remove ();
In this Code, the exit part is deleted. After the deletion, no additional p elements exist in the webpage.
3. process the TemplateAfter the last two sections, I learned how to process redundant data and elements. However, sometimes we do not know whether there are many data or many elements, or allow users to decide who is more and who is less. If you do not know the length of the array or the number of elements, you can define a processing template. See the following code:
Var dataset = [10, 20, 30]; var p = d3.select ("body "). selectAll ("p"); // After binding data, return the var update = p. data (dataset); var enter = update. enter (); var exit = update. exit (); // 1. update Method. text (function (d) {return d ;}); // 2. enter. append ("p "). text (function (d) {return d ;}); // 3. processing Method of exit part exit. remove ();
In this case, you do not need to consider whether the webpage has enough p elements or redundant p elements, the final result must be an item in the array corresponding to a p element, with no additional information. This method can be called a set of ProcessingTemplateFrequently used when data needs to be updated. Thank you for reading. The next article describes how to apply the template.
Document InformationStart building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
