Home > Developer > Web Develop
When I first approached the use of D3.js, one of the most confusing places was data (), enter (), and exit () .
After I have been in touch for a while and have some understanding, simply say what I understand.
data ()Let's look at an 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 something about the data, such as setting the element width, and so on.
On the surface, it is not possible to see any change. But internally, it adds a __data__ attribute on the corresponding DOM element, which can be document.getelementsbytagname ("P") [0].__data__ See.
Enter () and exit ()These two operations are confusing because it is difficult to infer their usefulness from the name alone.
In the example above data () , we have the same number of DOM elements and numbers. But what do we do if it's not the same?
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 generally want the program to help create it.
In the following example, we do not provide DOM elements in advance:
< Body > </ Body >
Still executes:
D3.select ("Body"). SelectAll ("P"). data ([1, 2, 3])Unlike the example above, we can proceed with the . Style ("width", "100px"), and so on. But here we can't because we don't have the option to DOM elements that need to be created first.
Enter () is used to select the missing part of the DOM element after binding the data . We may wonder, since it is the missing part, how to choose? It takes a little imagination to imagine that we have chosen something that does not exist. We can call it "virtual DOM" or "placeholder (placeholder)".
Enter () is just a selection and does not actually add the required DOM elements. As a result, the actual creation of DOM elements is usually followed by Enter () with append ().
Since then, we have used d3.select ("Body"). SelectAll ("P"). data ([1, 2, 3]). Enter (). Append ("P") to automatically create the required DOM element.
Exit ()in contrast to enter () ,exit () is used to select DOM elements that are more than the data .
In the following example, we provide a DOM element:
<Body> <P></P> <P></P> <P></P> <P></P></Body>
This time is easy to understand, because it is more out, then the actual existence, that is, the last <p>.
If we get more, we can use . Remove () to remove these elements with the following code:
D3.select ("Body"). SelectAll ("P"). data ([1, 2, 3]). Exit (). Remove ();The role of data (), enter (), and exit () in D3.js
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
