D3.js是一个强大的JavaScript库，用于创建交互式和动态的数据可视化。在D3.js中，data(), enter() 和 exit() 是重要的方法，用于管理绑定到DOM元素的数据。
data() 方法
data() 方法是D3.js中最基本的方法之一，用于将数据绑定到DOM元素上。它接受一个数组作为参数，并返回一个选择器（selection），该选择器表示DOM元素的集合。
例如，假设我们有以下HTML代码：
<ul> <li></li> <li></li> <li></li> </ul>
我们可以使用data() 方法将数据绑定到每个li元素上：
var data = [1, 2, 3];
d3.select("ul")
.selectAll("li")
.data(data)
.text(function(d) { return d; });这将把1、2、3分别绑定到每个li元素上，并将其文本内容设置为相应的值。
enter() 方法
enter() 方法是D3.js中的另一个重要方法，用于处理新数据。如果绑定的数据比DOM元素的数量少，就需要使用enter() 方法。
例如，假设我们有以下HTML代码：
<ul> <li>1</li> <li>2</li> <li>3</li> </ul>
现在我们想添加一个新的列表项，以显示数字4。我们可以使用enter() 方法来处理新数据：
var data = [1, 2, 3, 4];
d3.select("ul")
.selectAll("li")
.data(data)
.enter()
.append("li")
.text(function(d) { return d; });这将自动创建一个新的li元素，并将其绑定到数字4上。
exit() 方法
exit() 方法用于删除不需要的DOM元素。如果绑定的数据比DOM元素的数量多，就需要使用exit() 方法。
例如，假设我们有以下HTML代码：
<ul> <li>1</li> <li>2</li> <li>3</li> </ul>
现在我们想删除最后一个列表项，以显示只有数字1和2的列表。我们可以使用exit() 方法来处理不需要的DOM元素：
var data = [1, 2];
d3.select("ul")
.selectAll("li")
.data(data)
.exit()
.remove();这将删除最后一个li元素，因为它没有与任何数据绑定。
示例代码
下面是一个完整的示例代码，演示了如何使用D3.js中的data(), enter() 和 exit()方法：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ---- ------- ---------------
------- ---------------------------------------------
-------
------
---------
--------
--- ---- - --- -- ---
---------------
----------------
-----------
--------
-------------
----------------- - ------ -- ---
--- ------- - ----
---------------
----------------
--------------
--------
-------------
----------------- - ------ -- ---
--- ------- - --- ---
---------------
----------------
--------------
-------
----------
---------
-------
-------这个示例代码演示了如何使用data(), enter() 和 exit()方法，将数据绑定到DOM元素上，并动态地添加和删除列表项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/4078