本文介绍了D3.js中的data(), enter()和exit()操作，这三个概念对于处理数据与DOM元素数量不匹配的情况至关重要。data()用于绑定数据到DOM元素，enter()在数据多于元素时创建新的DOM元素，exit()则用于删除多余的数据不再绑定的元素。通过这些操作，D3.js可以实现数据驱动的动态可视化。"
102610144,1067960,Pytorch深度学习：多GPU训练实战,"['Pytorch框架', '深度学习', 'GPU训练']
D3的应用非常广泛，现在成为了主流数据可视化工具之一。大家在刚接触使用d3.js的时候，感到最吃力的地方是data(), enter(), exit()这几个操作。
在我接触一段时间，有了一些了解之后，简单说说我的理解。
data()
先看一个例子：
|
1
2
3
4
5
|
<body>
<p></p>
<p></p>
<p></p>
</body>
|
执行代码：
|
1
|
d3.select(
"body"
).selectAll(
"p"
).data([1, 2, 3])
|
这里，data()是用来绑定数据到选择的DOM元素上.这样以后，就可以针对这些数据做一些相关操作，比如设置元素宽度等。
从表面上，并不能看出什么变化。但在内部，它是在对应的DOM元素上添加了一个__data__属性，可以通过document.getElementsByTagName("p")[0].__data__看到。
enter()和exit()
这两个操作令人困惑是因为单从名字上看，很难推断出它们的作用。
在上面data()的例子中，我们的DOM元素和数据的个数是一样的。但如果不一样的话，我们该怎么办？
enter()和exit()就是用来处理这种情况的。
enter()
当DOM数量少于data的数量，或者压根一个都没有的时候，我们一般会希望让程序帮忙创建。
下面的例子，我们没有事先提供DOM元素：
|
1
2
|
<body>
</body>
|
仍旧执行：
|
1
|
d3.select(
"body"
).selectAll(
"p"
).data([1, 2, 3])
|
与上面例子不同的是，上面的例子中我们可以继续执行.style("width", "100px")等操作。但这里我们不能了，因为我们没有选择到DOM元素，需要先创建。
enter()是用来在绑定数据之后，选择缺少的那部分DOM元素。我们可能会疑惑，既然是缺少的部分，怎么选择呢？这里就需要我们发挥一点想象力，想象我们选择了一些不存在的东西。我们可以称之为“虚拟DOM”或“占位符(placeholder)”。
enter()只是进行选择，并未实际添加所需DOM元素。因此在enter()之后一般都会配合append()来进行DOM元素的实际创建。
由此以来，我们使用 d3.select("body").selectAll("p").data([1, 2, 3]).enter().append("p") 即可根据数据自动创建所需的DOM元素。
enter的处理方法
如果没有足够的元素，那么处理方法通常是使用append()添加元素。请看下面的代码：
|
1
2
3
4
5
6
7
8
9
10
11
|
最低0.47元/天 解锁文章
扫一扫
566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
