Home > Developer > Web Develop
The relationship between the selection set and the data is the most important foundation of D3, in the "Getting Started-7th chapter" When a little explanation, for to master good D3 is not enough. Therefore, a new classification is devoted to the relationship between the selection set and the data, including the use and working principles of data binding, the principle of update, enter, exit, and how to use it, and there will be many such articles in the following period.
D3 's biggest feature is the ability to bind data to the DOM. After selecting an element using Select or SelectAll, there is no data on the selected element. Data binding is the inclusion of data in selected elements. There are two functions associated with this:
The concepts above may be difficult to understand, don't worry, then dissect datum () and data () in turn to see how data binding works, and how they differ. Although not understand the principle can also directly use these two functions, but encountered unexpected results often do not know how to debug, not to start, so it is generally known that the work process is necessary.
Working process of Datum ()The Datum () method of binding data is simple and less used in D3, but it can help you understand how data D3 bind data. Please look at the following code first:
<body><!--Three paragraph elements--><p>fire</p><p>water</p><p>wind</p>< script>//selects all the P elements in the body, the selection set results are assigned to the variable pvar p = d3.select ("Body"). SelectAll ("P");//Bind the value 7 to the selection set on P.datum (7);// In the console output selection set Console.log (p);</script></body>In this code, the value 7 is bound to the selection set using Datum (), and then the selection set is output in the console. In the browser's console, you can see the output shown in 1. It contains three P elements, which are the three paragraphs selected with SelectAll, as well as information such as the size (length) of the selection set, the parent node (parentnode), and so on.
Figure 1
Expands any of the P elements, as shown in the Properties 2. As you can see, after binding, there is an extra __data__ property, and the value 7 is the data you just bound. Expand the other P elements, and you will find that each element has an extra __data__, and the value is 7.
Figure 2
Then the working process of datum () is clear, that is, for each element in the selection set, add a __data__ attribute to the value of datum (value). The value here is not necessarily a number (numeric) type, it can also be a string (string), Boolean (Boolean), and an object, regardless of the type, its working procedure is to assign a value to __data__. If you use undefined and null as parameters, the __data__ property will not be created. Let's look at the source code for Datum ():
D3_selectionprototype.datum = function (value) {return arguments.length? This.property ("__data__", value): This.property ("__data__");The source code can be known by the above, in fact datum () is implemented with the D3 property () function: If there is a parameter value, call the property to add a __data__ attribute to the current object, otherwise return the __data__ attribute value. Here's a test of the case without parameters:
var p = d3.select ("Body"). SelectAll ("P");p. Datum (7); Console.log (P.datum ());//output bound data on the consoleThis code will output the number 7 in the console, exactly the data being bound. There is an existing problem, how to use the data when it is bound on the selection set, or how D3 wants us to use it. Here is an example of replacing the original string with a string that is bound:
<body><p>fire</p><p>water</p><p>wind</p><script>var p = D3.select ("Body"). SelectAll ("P");p. Datum ("thunder")//Bind string Thunder to the selection set . Text (function (d,i) {//Replace contents return D + "" + I; }); </script></body>In this code, you use Datum () to bind a string thunder to the selection set, and then call the text () to replace the string. The text () is used to set or get the selected elements. The parameter of text () is a nameless functions function (D,i), which represents the data (datum) and index respectively (index). The names of these two parameters can also be used without the use of D and I, but the meaning is constant. In D3, it is recommended to write D and I. Finally, in this nameless function, a string with a combination of D and I is returned, with a space in the middle. As shown in result 3, the string of three paragraph element p in the Web page is replaced with: Thunder 0, Thunder 1, Thunder 2.
Figure 3
The results show that the two parameters D and i,d of the nameless function represent the data being bound, and I represent the index number starting from 0. Using the data that is bound in D3 is used in the above form, that is, to define a nameless functions function (d,i), and then use D and I in the implementation of the function. D3 also has a feature that enables the bound data to be passed to child elements. Make a slight change to the previous code:
P.datum ("Thunder"). Append ("span")//Add element Span.text after each selected element (function (d,i) {return "" + D;});As shown in result 4, the span element is added at the end of each paragraph element, and the content is thunder.
Figure 4
The following uses Console.log to output the selection set p in the console, as shown in output result 5. As you can see, the child element span also contains the attribute __data__, and the property value is also the string thunder. You can conclude that the new element will also have bound data when the element is added to the selected set of bound data.
Figure 5
The next chapter describes the process of detailing data (), thanks for reading.
Document Information"D3.js selection set and data detail-1" Bind Data Using Datum ()
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
