D3.js数据绑定核心：data(), enter() 与 exit() 原理解析

D3.js数据绑定核心：data(), enter() 与 exit() 原理解析

D3.js作为当前主流的数据可视化库，应用场景极为广泛。对于初学者而言，理解data()、enter()和exit()这三个核心方法的运作机制往往是最大的难点。

经过一段时间的学习与实践，这里对这三个方法的核心逻辑进行梳理和总结。

data()方法解析

data()方法解析

首先通过一个基础示例来观察其行为。

<body>
 <p></p>
 <p></p>
 <p></p>
</body>

执行以下代码：

d3.select("body").selectAll("p").data([1, 2, 3])

data()的主要作用是将数据绑定到已选中的DOM元素上。绑定完成后，即可基于这些数据进行后续操作，例如设置元素的样式属性（如宽度）。

从页面视觉上看，可能没有任何明显变化。但在底层实现中，D3会在对应的DOM节点上添加一个__data__属性，通过document.getElementsByTagName("p")[0].__data__即可访问到绑定的具体数据。

enter()与exit()的作用

enter()与exit()的作用

这两个方法之所以令人困惑，主要是因为仅从方法名难以直观推断其具体功能。

在前述data()的例子中，DOM元素的数量与数据数组的长度是相等的。然而，在实际开发中，两者数量不一致的情况非常常见，此时该如何处理？

enter()和exit()正是为了解决这种数量不匹配的问题而设计的。

enter()详解

enter()详解

当DOM元素的数量少于数据项的数量，甚至完全没有DOM元素时，通常需要程序自动创建缺失的元素。

以下示例中，页面初始状态下并未提供任何DOM元素：

<body>
</body>

继续执行上述代码：

d3.select("body").selectAll("p").data([1, 2, 3])

与前例不同，前例中可以直接调用.style("width", "100px")等方法，因为元素已存在。但在本例中，由于未选中任何实际DOM节点，无法直接操作，必须先创建元素。

enter()的作用是在数据绑定后，选中那些“缺失”的DOM部分。虽然这些元素在物理上不存在，但D3通过一种“虚拟DOM”或“占位符(placeholder)”的概念来处理它们，允许开发者对这部分数据进行操作。

需要注意的是，enter()仅完成选择操作，并不会实际向DOM中添加元素。因此，在调用enter()后，通常必须配合append()方法来实际创建所需的DOM节点。

通过链式调用 d3.select("body").selectAll("p").data([1, 2, 3]).enter().append("p")，即可根据数据数组自动创建对应数量的DOM元素。

enter()的处理策略

enter()的处理策略

当现有元素不足以覆盖所有数据时，标准的处理方式是使用append()添加新元素。参考以下代码：

<body> 
  <p></p> 
  <script> 
  var dataset = [3, 6, 9]; 
  var p = d3.select("body").selectAll("p"); 
//绑定数据后，分别获取update和enter部分 
  var update = p.data(dataset); 
  var enter = update.enter();   
//update部分的处理方法是直接修改内容 
  update.text( function(d){ return d; } ); 
//enter部分的处理方法是添加元素后再修改内容 
  enter.append("p") 
   .text(function(d){ return d; }); 
  </script> 
 </body> 

在此例中，body内仅有一个p元素，但数据数组包含三个值，因此enter部分包含了多出的两个数据项。处理逻辑是对这两个多余数据执行append操作，从而生成对应的DOM元素。处理后，body中将包含三个p元素，其内容分别对应数据值。

<p>3</p> 
<p>6</p> 
<p>9</p> 

在典型的数据可视化场景中，服务器返回的数据往往存在，但网页中尚未渲染任何DOM元素。这是D3的一个重要特性：允许选中一个空集，并通过enter().append()的形式动态插入元素。假设body中初始没有p元素，代码如下：

var dataset = [10,20,30,40,50]; 
var body = d3.select("body"); 
body.selectAll("p") //选择body中所有p，但由于没有p，所以选择了一个空集 
 .data(dataset)  //绑定dataset数组 
 .enter()   //返回enter部分 
 .append("p")  //添加p元素 
 .text(function(d){ return d; }); 

上述代码中，selectAll("p")选中了一个空集，随后绑定数据。由于初始选择集为空，data()返回的update部分也为空。接着调用enter()和append()，确保每个数据项都对应一个p元素，最后通过.text()修改内容。这表明，enter部分的常规处理方式是使用append()添加元素。

exit()详解

exit()详解

与enter()相反，exit()用于选中那些在DOM中存在但数据数组中已没有对应项的“多余”DOM元素。

以下示例中，我们提供了比数据更多的DOM元素：

<body>
 <p></p>
 <p></p>
 <p></p>
 <p></p>
</body>

此时逻辑较为直观，因为多出的部分是实际存在的，即最后一个<p>标签。

对于多出的元素，通常的处理方式是使用.remove()将其从DOM中移除。代码如下：

d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();

exit()的处理策略

exit()的处理策略

当DOM元素数量超过数据项数量时，多余元素没有数据对应。标准做法是使用remove()删除这些元素。假设body中有5个p元素，而数据只有3个，代码如下：

var dataset = [10, 20, 30]; 
 var p = d3.select("body").selectAll("p"); 
//绑定数据之后，分别获取update部分和exit部分 
 var update = p.data(dataset); 
 var exit = update.exit(); 
//update的部分的处理方法是修改内容 
 update.text( function(d){ return d; } ); 
//exit部分的处理方法是删除 
 exit.remove(); 

该代码中，对exit部分的处理是执行删除操作。执行后，网页中将不再保留多余的p元素，保持DOM与数据的一致性。

参考资料

"Thinking with Joins" - by Mike Bostock