Home > Developer > Web Develop
[D3.js selection set and data details-2] bind data with data (), d3.jsdata
In D3, data binding is mostly done by the data () function. How does it work? What is the difference between it and datum?
The data () function can bind array items to each element separately and set binding rules. Data () can also handle the inconsistency between the array length and the number of elements. When the array length is greater than the number of elements, the element location can be reserved for redundant data, so that new elements can be inserted in the future. When the array length is less than the number of elements, you can provide a method to point to redundant elements for future deletion. Next we will analyze how data () is bound to data, and what new features are compared with datum.
Data () WorkflowAssume that the body contains three paragraph elements, p. The HTML code is as follows:
<body><p>Lion</p><p>Tiger</p><p>Leopard</p></body>
To bind the items of an array to each element, assume that the array to be bound is [3, 6, 9], then we want the first p element to bind 3, the second to bind 6, the third binding is 9. In this case, you need to use the data () function. If you use datum (), the array itself is bound to each element, that is, the first p element is bound to [3, 6, 9]. the second binding is [3, 6, 9], and the third binding is [3, 6, 9]. The difference is 1.
Figure 1
The code for binding data with data () is as follows:
// Define the array var dataset = [3, 6, 9]; // select the p element var p = d3.select ("body") in the body "). selectAll ("p"); // bind data to the selected set var update = p. data (dataset); // outputs the bound result console. log (update );In this Code, bind the array to the selection set and output the result. As shown in figure 2, the three items in the array are bound to each element, which is consistent with the prediction in Figure 2.
Figure 2
In the preceding example, the array length is exactly the same as the number of elements. The two are also not equal. If the array length is 5 and the number of elements is 3, two more data are not bound to the element. If the array length is 1 and the number of elements is 3, two elements are not bound to Data. In D3, based on the relationship between the array length and the number of elements, the following situations are called:
The meaning of these three words may be hard to understand. The original meaning of update is "update", the original meaning of enter is "enter", and the original meaning of exit is "exit ", the literal translation result is difficult to express what is needed. In fact, in data visualization, the data in the hands is usually visualized, And it is useless to bind data elements. We can understand these three words as follows: if the array length is greater than the number of elements, the Redundant Array item "will enter the visualization (enter)"; if the array length is less than the number of elements, the redundant element "exit". If the array length is equal to the number of elements, the data on the element is "updated )".
Is it hard to understand? It doesn't matter. See figure 3. The left graph indicates that the array length is 5 and the number of elements is 3. Therefore, two array items are not connected to them. This part is called enter. The right figure indicates that the array length is 1 and the number of elements is 3, so there are two elements that are not connected to the array items. This part is called exit. The part connecting array items and elements is called update.
Figure 3
The data () function returns an object that contains the update part and two functions. One is the enter () function, return the enter part, the other is the exit () function, and return the exit part. See the following code:
var dataset = [3, 6, 9, 12, 15];var p = d3.select("body").selectAll("p");var update = p.data(dataset);console.log(update);console.log(update.enter());console.log(update.exit());
In this Code, the array length is 5, the number of elements is 3, and there are two more array items. The output result is 4 and 5.
Figure 4
Figure 4 shows the three p elements of the bound data. There are also two functions, enter () and exit (), which are used to return the enter and exit sections in this binding.
Figure 5
In Figure 5, we can see that in the enter section, D3 has reserved locations for the Redundant Array item 12 and 15 for future operations. Enter contains an update variable pointing to the update section. There are no redundant elements in this binding, so there is no content in exit. If you replace the array:
var dataset = [3];
The output result 6 of exit shows the two p elements.
Figure 6
Thank you for reading.
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
