D3中理解 data, enter, exit 的使用

data() 当对应的元素正好满足时 绑定数据数量 对应元素 body p/p p/p p/p /bodyd3.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();