1. select 和 selectAll 的区别
在 D3 中，选择元素的函数有两个：select 和 selectAll，它们的使用非常重要。先说明一下它们的区别：
select 是选择所有指定元素的第一个
selectAll 是选择指定元素的全部（用于同时操作）
这两个函数返回的结果称为选择集。
来看一个具体的例子，现有如下代码：
<html>
<head>
<meta charset="utf-8">
<title>select,append,remove</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 大小的标题。
现在要完成两种选择元素的任务：
（1）选择第一个 <h1> 元素
（2）同时选择三个 <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 变量选中的元素上色，加上这一句后，会发现结果为：
因此，可以证明选中的是第一个 <h1> 元素。
如果换上代码：
all_h1.style("color","blue");
会发现三行文字都变成了蓝色。
那么如果想选择第二个 <h1> 元素呢？正如上一节所说的，有两种方法，要么给 <h1> 加 id ，要么用无名函数 function 的形式，详细见上一章。
2. 插入元素
接下来在 <body> 里新插入一个 <h1> 元素，代码如下
var new_h1 = body.append("h1");
new_h1.text("Append new h1");
这里表示插入一个 <h1> 元素后，将其文字设为 Append new h1，结果为：
3. 删除元素
删除一个元素时，对于选择的元素，使用 remove 即可，代码如下：
new_h1.remove();
这是删除 new_h1 变量中选择的元素。
时间： 2024-12-17 00:09:43