Home > Developer > Web Develop
After binding the data, the selection set is divided into three parts: update, enter, exit. What is the three-part approach? This article will explain how it is handled and a common processing template.
1. How to handle EnterIf there are not enough elements, then the processing method is usually to add elements using append (). Take a look at the following code:
<body><p></p><script>var DataSet = [3, 6, 9];var p = d3.select ("Body"). SelectAll ("P");//After binding the data, Get update and enter section var update = P.data (DataSet) Separately, var enter = Update.enter (),//update section is directly modified content Update.text (function (d) {return D;} The//enter section is handled by adding elements and then modifying the content Enter.append ("P"). Text (function (d) {return D;}); </script></body>In this case, there is only one P element in the body, but there are three data, so the Enter section contains the extra two data. The method of processing redundant data is the append element, corresponding to it. After processing, the body has three P elements, the contents are:
<p>3</p><p>6</p><p>9</p>
Typically, the data is available after the file is read from the server, but there are no elements in the page. This is a very important feature of D3, that is, you can select an empty set and then use Enter (). append () to insert the element. Assuming there is no P element in the body, see the following code:
var dataset = [10,20,30,40,50];var BODY = D3.select ("Body"), Body.selectall ("P")//selects all p in body, but because there is no p, an empty set is selected. Data ( DataSet)//Bind the DataSet array. Enter ()//returns to the Enter section. Append ("P")//Add P element. Text (function (d) {return D;});In the code above, SelectAll selects an empty set, and then 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 of the data has an element p corresponding to it. Finally, the content of the P element is changed. The common way to handle the Enter section is to add elements using append ().
2. How to handle exitThere are more elements, no data corresponding to them. For such an element, the usual practice is to remove the element using remove (). Assuming that there are 5 p elements in the body, see the following code:
var dataset = [Ten, 30];var p = d3.select ("Body"). SelectAll ("P");//After binding the data, get the update part and exit part var update = P.data (datas ET); var exit = Update.exit (); the part of//update is handled by modifying the contents Update.text (function (d) {return D;}); /exit part of the processing method is to delete Exit.remove ();In this code, the exit section is handled by deleting. After deletion, there will be no extra p elements in the page.
3. Working with templatesAfter the last two sections, you know how to handle the extra data and elements. However, sometimes we don't know whether there is more data, more elements, or allow users to decide who is less. For questions that do not know the length of an array or the number of elements beforehand, you can define a set of processed templates. Take a look at the following code:
var dataset = [Ten, 30];var p = d3.select ("Body"). SelectAll ("P");//After binding data, return update, enter, exit part var update = P.data (da Taset); var enter = Update.enter (); var exit = Update.exit ();//1.update part processing Method Update.text (function (d) {return D;}); /2.enter part of the processing method Enter.append ("P"). Text (function (d) {return D;}); /3.exit part of the treatment Method Exit.remove ();Thus, there is no need to consider whether there are enough p elements in the page, or if there is an excess P element, regardless of the circumstances, the final result must be a P element corresponding to an item in the array, no superfluous. This approach, which can be called a set of processing templates , is often used when data needs to be updated frequently. Thank you for reading. The next article will tell you how to apply the template.
Document Information"D3.js selection set and data detail-4" Enter and exit processing methods and processing templates
Start 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
