Home > Developer > Web Develop
In D3, there are two functions for selecting an element: Select and SelectAll, which are very important to use. 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 simultaneous operation)
The results returned by these two functions are called selection sets.
To see a specific example, the following code is available:
<HTML> <Head> <MetaCharSet= "Utf-8"> <title>Select,append,remove</title> </Head> </style> <Body> <H1>This is a cat.</H1> <H1>That's a dog.</H1> <H1>I like Cat.</H1> <Scriptsrc= "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.
Now you want to complete the tasks of the two selection elements:
(1) Select the first
(2) Simultaneous selection of three
The code is as follows:
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 H1To prove that the above variable H1 selected the first
H1.style ("Color", "red");Color the selected elements of the H1 variable, plus this sentence, you will find the result:
As a result, you can prove that the first
If you replace the code:
All_h1.style ("Color", "blue");It turns out that three lines of text are blue.
So what if you want to choose a second
2. Inserting elementsNext, insert a
var new_h1 = Body.append ("h1"); New_h1.text ("Append new H1");This indicates that after inserting an
3. Deleting an elementWhen deleting an element, use remove for the selected element, and the code is as follows:
New_h1.remove ();
This is the element selected in the delete new_h1 variable.
"D3.js Starter Series-2.1" SELECT, INSERT, delete 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
