Home > Developer > Web Develop
Most of the data bound in D3 is done by the function, how does it work, and how does it differ from datum ()?
The data () function can bind array items to each element individually, and can set rules for binding. Data () can also handle cases where the length of the array is inconsistent with the number of elements. When the array length is greater than the number of elements, the element position can be reserved for extra data so that new elements can be inserted in the future, and when the array length is less than the number of elements, a method to point to the extra elements is provided for future deletion. The following is an anatomy of how data () is bound to be, and what new features are available compared to Datum ().
The working process of data ()Suppose the body has three paragraph elements p,html code as follows:
<body><p>Lion</p><p>Tiger</p><p>Leopard</p></body>
To bind an array of items to each element individually, assuming that the array to bind to IS [3,6,9], then we want the first P element to bind 3, the second binding 6, and the third binding 9. This situation requires the use of the data () function, and if Datum () is used, the array itself is bound to each element, that is, the first P-element binding [3,6,9], the second binding [3,6,9], and the third binding [3,6,9], which is shown in the difference 1.
Figure 1
The code that uses data () to bind the information is as follows:
Define the array var dataset = [3, 6, 9];//Select the P element in body var p = d3.select ("Body"). SelectAll ("P");//bind data to selection set var update = P.data (DataSet );//output binding result Console.log (update);Figure 2
In the above example, the array length is exactly equal to the number of elements. The two also have unequal conditions, if the array length is 5 and the number of elements is 3, then 2 more data does not have a binding element. If the array length is 1 and the number of elements is 3, there will be 2 elements that do not have data bound. In D3, according to the relationship between the length of the array and the number of elements, each case is referred to as:
The meaning of these three words may be difficult to understand, update is originally intended to be "updated", enter the original meaning of "enter", exit the original intention is "exit", the result of literal translation is difficult to express the desired meaning. In fact, in data visualization, the hands of the data is usually to be visualized, and there is no binding data elements are useless. So for these three words, we can understand: If the array length is greater than the number of elements, then the extra array item "will enter the visualization (enter)", if the array length is less than the number of elements, the extra element "will exit the visualization (exit)", if the array length equals the number of elements, the data on the element " The update was received.
Or is it hard to understand? It doesn't matter, see Figure 3. Where the left image represents an array length of 5 and the number of elements is 3, then two array items have no elements attached to it, and this part is called ENTER. The picture on the right 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 item, which is called exit. The parts of an array that are connected to an element are called update.
Figure 3
The data () function returns an object containing the update part and two functions. One is the Enter () function, which returns the Enter section, the exit () function, and the exit section. Take a look at the following code:
var DataSet = [3, 6, 9, 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 the extra two array items. Its output results are shown in 4 and 5.
Figure 4
In Figure 4, you can see the three P elements of the data being bound. There are also enter () and exit () two functions that return the Enter and exit portions of this binding.
Figure 5
In Figure 5, you can see that in the Enter section, D3 has reserved a location for the extra array items 12 and 15 for future operations. The Enter section also has an update variable that points to the update section. There are no extra elements in this binding, so there is no content in exit. If you replace the array with:
var dataset = [3];
The exit result 6 shows that the two P-elements are visible.
Figure 6
Thank you for reading.
Document Information"D3.js selection set and data detail-2" using data () binding
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
