data() 当对应的元素正好满足时 （ 绑定数据数量 = 对应元素 ）
<body>
<p></p>
<p></p>
<p></p>
</body>d3.select("body").selectAll("p").data([1, 2, 3]);这里，data()是用来绑定数据到选择的DOM元素上.这样以后，就可以针对这些数据做一些相关操作，比如设置元素宽度等。
从表面上，并不能看出什么变化。但在内部，它是在对应的DOM元素上添加了一个data属性，可以通过document.getElementsByTagName(“p”)[0].data看到。
enter() 当对应的元素不足时 （ 绑定数据数量 > 对应元素 ）
当DOM数量少于data的数量，或者压根一个都没有的时候，我们一般会希望让程序帮忙创建。
<body>
</body>执行：
d3.select("body").selectAll("p").data([1, 2, 3]); //没反应与上面例子不同的是，上面的例子中我们可以继续执行.style(“width”, “100px”)等操作。但这里我们不能了，因为我们没有选择到DOM元素，需要先创建。
d3.select("body").selectAll("p").data([1, 2, 3]).enter().append("p");enter()只是进行选择，并未实际添加所需DOM元素。因此在enter()之后一般都会配合append()来进行DOM元素的实际创建。
exit() 当对应的元素过多时 （ 绑定数据数量 < 对应元素 ）
当对应的元素过多时，通常要删除元素，使之与绑定数据的数量相等。后面通常要跟 remove 操作。
与enter()相反，exit()是用来选择那些与数据相比多出来的DOM元素。
<body>
<p></p>
<p></p>
<p></p>
<p></p>
</body>我们可以接着用.remove()移除这些元素，代码如下：
d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();
扫一扫
815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
