D3.js selectAll()函数与enter()函数

1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>D3 Test</title>
6<script type="text/javascript" src="d3.v3.js"></script>
7</head>
8<body>
9<p> 天天 </p>
10<p> 天天 </p>
11<script type="text/javascript">
12var dataset = [ 5, 10, 15, 20, 25 ];
13
14console.log(d3.select("body").selectAll("p").data());
15//输出[undefined, undefined]
16
17d3.select("body").selectAll("p")
18.data(dataset)
19.enter()
20.append("div")
21.text("New paragraph!")
22
23console.log(d3.select("body").selectAll("p").data());
24//输出[5, 10]
25
26/*总结:
27 * enter()函数的执行，依赖于selectAll()函数执行的结果，有三种情况
28 * 1.没有选中元素，返回空值，enter()函数把数据完全绑定到append的元素上
29 * 2.(上面代码)选中两个元素，返回两个元素，enter()函数把前两个数据绑定到这两个元素上，不执行append()等下面代码。多余的数据执行append，绑定到新元素上。
30 * 3.选中元素数量比数据多，返回多个元素，数据完全绑定到前5个元素上(共5个数据)，enter()函数一次也不往下执行
31 */
32</script>
33</body>
34</html>

评论区

加载中...

D3.js selectAll()函数与enter()函数

评论区

相关推荐