D3.js 入门系列 --- 2.1 关于怎样选择，插入，删除元素
Posted cynchanpin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了 D3.js 入门系列 --- 2.1 关于怎样选择，插入，删除元素相关的知识，希望对你有一定的参考价值。
本人的个人博客首页为： http://www.ourd3js.com/ ，csdn博客首页为：http://blog.csdn.net/lzhlzz/。
转载请注明出处，谢谢。
在D3.js中，选择元素的函数有两个：select 和 selectAll 。
先说明一下它们的差别：
- select 是选择所有指定元素的第一个
- selectAll 是选择指定元素的所有（以用于后面同一时候操作）
来看一个详细的样例，现有例如以下代码：
<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>熟悉HTML的朋友一定会知道上面的代码输出什么，是三行h1大小的标题。
假设要完毕两种选择任务：选择第一个h1 和 同一时候选择三个h1 。
代码例如以下：
var body = d3.select("body"); //选择body（第一个body，当然也仅仅有一个body）
var h1 = body.select("h1"); //选择第一个h1
var all_h1 = body.selectAll("h1"); //选择全部的h1为了证明上面的变量h1选择的是第一个h1，all_h1选择的是全部的h1，我们加上代码：
h1.style("color","red");给h1变量选中的元素上色，加上这一句，会发现结果为：
如此。我们能够证明我们选中的是第一个元素。
假设换上代码：
all_h1.style("color","blue");会发现三行文字都变成了蓝色。
那么假设想选择第二个h1呢？正如上一节所说的，有两种方法。要么给h1加id。要么用function的形式，具体见上一节。
接下来在body里新插入一个h1。
var new_h1 = body.append("h1");
new_h1.text("Append new h1");这里表示在body里新插入一个h1标签，插入之后返回新插入的元素，再设定文字为Append new h1。
删除一个元素时，对于选择的元素使用remove。如：
new_h1.remove();这是删除new_h1变量中选择的元素。
以上是关于 D3.js 入门系列 --- 2.1 关于怎样选择，插入，删除元素的主要内容，如果未能解决你的问题，请参考以下文章
D3.js 入门系列 --- 1 第一个程序HelloWorld