"D3.js Starter Series---2.1" about how to choose, insert, delete elements

My personal blog home: http://www.ourd3js.com/, csdn Blog home for: http://blog.csdn.net/lzhlzz/.

Reprint please indicate the source, thank you.

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 (to be used at the same time later)

Consider a detailed example of the following code:

A friend who is familiar with HTML will know what the above code output is, and is a three-line H1-size title.
Suppose you want to complete two choices: Select the first H1 and select three H1 at the same time.
The code is as follows:
var BODY = D3.select ("body");           Select Body (the first body, of course, there is only one body) var H1 = Body.select ("H1");             Select the first H1var 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:
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.
Let's say you put the code in:

All_h1.style ("Color", "blue");

It turns out that three lines of text are blue.
So what about the false idea of choosing a second H1? As mentioned in the previous section, there are two ways to do this. or give H1 ID. Either in the form of a function, see the previous section specifically.

Next, insert a H1 in the body Rivin.
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:
New_h1.remove ();
This is the element selected in the delete new_h1 variable.


 
"D3.js Starter Series---2.1" about how to choose, insert, delete elements