D3选择元素和绑定数据

D3选择、插入、删除元素
d3.select()：是选择所有指定元素的第一个
d3.selectAll()：是选择指定元素的全部

<html>

<head>
	<meta charset="utf-8">
	<title>HelloWorld</title>
</head>

<body>
	<p>Apple</p>
	<p id="second">Pear</p>
	<p>Banana</p>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
		// 选择所有的p元素
		// var body = d3.select("body");
		// var p = body.selectAll("p");

		// 选择第一个p元素
		// var p1 = d3.select("p");
		// p1.style("color", "red");

		// 选择第二个p元素
		// var p2 = d3.select("#second");
		// p2.style("color", "red");

		// 在 body 中 id 为 second 的元素前添加一个段落元素。
		// var body = d3.select("body");
		// body.insert("p", "#second")
		// 	.text("insert p element");

		// 删除元素
		var body = d3.select("body");
		var p = body.select("#second");
		p.remove();
	</script>
</body>

</html>
D3绑定数据

D3 中是通过以下两个函数来绑定数据的：

  • datum()：绑定一个数据到选择集上
  • data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定

相对而言，data() 比较常用。

datum（）
<body>
	<p>Apple</p>
	<p>Pear</p>
	<p>Banana</p>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
		var str = "China";
		var body = d3.select("body");
		var p = body.selectAll("p");
		p.datum(str);
		// d 代表数据，也就是与某元素绑定的数据。
       // i 代表索引，代表数据的索引号，从 0 开始。
		p.text(function (d, i) {
			return "第 " + i + " 个元素绑定的数据是 " + d;
		});
	</script>
</body>

其结果如下：

第 0 个元素绑定的数据是 China

第 1 个元素绑定的数据是 China

第 2 个元素绑定的数据是 China
data()

有一个数组，接下来要分别将数组的各元素绑定到三个段落元素上。

var dataset = ["I like dog","I like cat","I like snake"];

绑定之后，其对应关系的要求为：

  • Apple 与 I like dog 绑定
  • Pear 与 I like cat 绑定
  • Banana 与 I like snake 绑定

调用 data() 绑定数据，并替换三个段落元素的字符串为被绑定的字符串，代码如下：

<html>

<head>
	<meta charset="utf-8">
	<title>HelloWorld</title>
</head>

<body>
	<p>Apple</p>
	<p>Pear</p>
	<p>Banana</p>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
	var dataset = ["I like dog","I like cat","I like snake"];
	var body = d3.select("body");
	var p = body.selectAll("p");
	p.data(dataset)
	.text(function(d,i){
		return d;
	})
	</script>
</body>

</html>

结果如下：

I like dog

I like cat

I like snake
posted @ 2021-04-23 16:04  Cupid05  阅读(63)  评论(0)  编辑  收藏  举报