Home > Developer > Web Develop
D3 has a unique feature: the ability to bind data to the DOM, that is, to bind to a document. This may not be easy to understand, for example, there are paragraph elements in the Web page <p> we can bind integer 5 to <p>.
The data () is used in the D3, and the most common one is the datum () function.
The following HTML code is available:
< P > Hello World 1</p><p>Hello World 2</ P > < P > Hello World 3</p>
Then, there is the following data:
var set = [' I like dog ', ' I like cat ', ' I like Snake '];
This is an array with three items. Now you want to bind these three items to three paragraph elements respectively, namely:
Hello World 1 binds to I like dog
Hello World 2 and I like cat bindings
Hello World 3 binds to I like snake
Call data () and replace the string with three paragraph elements as a bound string with the following code:
var sp = D3.select ("Body"). SelectAll ("P"); // Select the element sp.data (SET) // bind data . Text (function(d,i) { return D; });In this piece of code,
Line 1th: Select all <p> elements in <body> and assign the selection set to a variable sp.
Line 2nd: Use the function data () to bind the array set.
Line: Change the contents of a paragraph element. There is a nameless function behind Funciont (d,i), here are two parameters: the first parameter means datum (data), the second parameter means index.
In function (d, I), the situation is as follows:
When i = = 0 o'clock, d is I like dog.
When i = = 1 o'clock, d is I like cat.
When i = = 2 o'clock, d is I like snake.
At this point, the three paragraph elements correspond to the three strings of the array set, and therefore, in function functions (d, I), add a code return D; Can.
Results such as:
If you do not bind the array set, you want to change all the paragraphs to the same string (for example, to China), just:
Sp.text ("China");Can.
2. How to select an elementIn "Getting Started – Chapter 1th" and above, you've tried to select HTML elements. In D3, the main use is two functions of select () and SelectAll ().
Use: D3.select ("P") and D3.selectall ("P")
Select () selects the first element specified in the document by default, and SelectAll selects all of the specified elements.
Here's a question: How do you choose a non-first element? What if we just want to select the third <p> element Hello World 3?
There are two ways:
(1) Assign an ID to the third <p>, i.e.
<id= "P3">Hello World 3</p>
Then choose
var sp = d3.select ("#p3"); // Select ElementYou can do it again.
(2) If data is bound, it can be manipulated in function (D,i), for example
Sp.text (function(d,i) { if(i==2) { ... } // if i = = 0 and I = = 1 are not specified, the null value will be returned automatically });However, it is important to note that, in this way, you must specify an operation that is not equal to 2 o'clock, otherwise a null value is returned, that is, the 1th and 2nd paragraphs become empty.
"D3.js Starter Series-2" binding data and selecting elements
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
