In D3.js, there are two functions for selecting an element: Select and SelectAll. Let's start by explaining their differences:
- Select is the first selection of all specified elements
- SelectAll is the selection of all of the specified elements (for later simultaneous operation)
To see a specific example, the following code is available:
[HTML]View PlainCopy
- <html>
- <head>
- <meta charset="Utf-8">
- <title>select,append,exit</title>
- </head>
- </style>
- <body>
- <H1>this is a cat. </H1>
- <H1>that is a dog. </H1>
- <H1>i like Cat. </H1>
- <script src="http://d3js.org/d3.v3.min.js" charset="Utf-8"></Script >
- <script>
- </Script>
- </Body>
- </html>
A friend who is familiar with HTML will know what the above code output is, and is a three-line H1-size title. If you want to do two kinds of selection tasks: Select the first H1 and select three H1 at the same time.
The code is as follows:
[HTML]View PlainCopy
- var body = D3.select ("body"); Select Body (the first body, of course, only one body)
- var h1 = body.select ("H1"); Select the first H1
- var all_h1 = body.selectall ("H1"); Select all the H1
To prove that the above variable H1 selected is the first h1,all_h1 selected is all H1, we add the code:
[HTML]View PlainCopy
- H1.style ("Color", "red");
To color the elements selected by the H1 variable, add this sentence and you will find the result:
So, we can prove that we have selected the first element.
If you replace the code:
[HTML]View PlainCopy
- All_h1.style ("Color", "blue");
It turns out that three lines of text are blue.
So what if you want to choose a second H1? As mentioned in the previous section, there are two ways to either give H1 an ID, or in the form of a function, see the previous section in detail.
Next, insert a H1 in the body Rivin.
[HTML]View PlainCopy
- var new_h1 = body.append ("H1");
- New_h1.text ("Append new H1");
This means inserting a H1 tag in the body Rivin, inserting the newly inserted element after insertion, and then setting the text to append new H1.
When you delete an element, use remove for the selected element, such as:
[HTML]View PlainCopy
- New_h1.remove ();
This is the element selected in the delete new_h1 variable.
From: Blog home: http://www.ourd3js.com/, csdn Blog home for: http://blog.csdn.net/lzhlzz/. Reprint please indicate the source, thank you.
D3.js Getting Started---2.1 "about how to select, insert, delete elements