D3 is widely used and is now one of the mainstream data visualization tools. Everyone in the first contact with the use of d3.js, the most difficult place is data (), enter (), exit () these several operations.
After I have been in touch for some time and have some understanding, simply say what I understand.
Data ()
Let's look at one example:
<body> <p></p> <p></p> <p></p> </body>
Execute code:
D3.select ("Body"). SelectAll ("P"). data ([1, 2, 3])
Here, data () is used to bind to the selected DOM element. After that, you can do some related operations on the data, such as setting the width of the elements.
On the surface, no change can be seen. Internally, however, it adds a __data__ attribute to the corresponding DOM element, which can be seen through the document.getElementsByTagName ("P") [0].__data__.
Enter () and exit ()
These two operations are confusing because it is difficult to infer their role from the name alone.
In the example above data (), we have the same number of DOM elements and numbers. But if it's not the same, what are we going to do?
The Enter () and exit () are used to handle this situation.
Enter ()
When the number of DOM is less than the number of data, or none at all, we usually want the program to help create.
For the following example, we did not provide a DOM element in advance:
<body> </body>
Still executing:
D3.select ("Body"). SelectAll ("P"). data ([1, 2, 3])
Unlike the example above, we can continue to perform the operation of. Style ("width", "100px"), and so on. But here we can't, because we didn't select the DOM element, which needs to be created first.
Enter () is used to select the missing part of the DOM element after the data is bound. We may wonder, since it is the missing part, how to choose? Here we need to play a little imagination and imagine that we have chosen something that does not exist. We can call it "virtual dom" or "placeholder (placeholder)."
Enter () simply makes a selection and does not actually add the required DOM elements. Therefore, after enter (), it is generally combined with append () for the actual creation of the DOM element.
Since then, we have used D3.select ("body"). SelectAll ("P"). data ([1, 2, 3]). Enter (). Append ("P") automatically creates the required DOM elements from the data.
Enter the processing method
If there are not enough elements, 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 the update and enter section respectively
var update = p.data (DataSet);
var enter = Update.enter ();
The update section is handled directly by modifying the content
Update.text (function (d) {return D;});
The Enter section is handled by adding an element and then modifying
the Content enter.append ("P")
. Text (function (d) {return D;});
</script>
In this case, the P element in the body has only one, but the data has three, so the Enter section contains two extra data. The processing method of 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>
Typically, the data is available after the file is read from the server, but there is no element in the Web page. This is an important feature of D3 that you can select an empty set and then insert the element in the form of Enter (). append (). Assuming there is no P element in the body now, 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 because there is no p, you have selected an empty set
. Data (DataSet) //bound DataSet array
. Enter () // Return to the Enter section
. Append ("P") //Add P element
In the above code, SelectAll selects an empty set and then binds the data. The update section returned by data () is empty because the selection set is empty. Then call enter () and append () so that each data has an element p corresponding to it. Finally, change the contents of the P element. The common treatment for the Enter section is to add elements using append ().
Exit ()
Instead of enter (), exit () is used to select the DOM elements that are more than the data.
In the following example, we provide more than one DOM element:
<body> <p></p> <p></p> <p></p> <p></p > </body>
This time is easy to understand, because it is more out, then is the actual existence, that is, the last <p>.
If we come out more, we can use. Remove () Remove these elements, the following code:
D3.select ("Body"). SelectAll ("P"). data ([1, 2, 3]). Exit (). Remove ();
How to handle exit
There are more elements, no data corresponding to them. For such an element, it is common practice to remove elements using remove (). Assuming there are 5 p elements in the body, see the following code:
var dataset = [Ten, a];
var p = d3.select ("Body"). SelectAll ("P");
After binding the data, get the update section and the exit section
var update = p.data (DataSet);
var exit = Update.exit ();
The part of the update is handled by modifying the content
Update.text (function (d) {return D;});
The exit section is handled by deleting
In this code, the exit section is handled by deleting. After deletion, there will be no extra p elements in the Web page.
Resources
"Thinking with joins"-by Mike Bostock
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
