为什么d3 exit()长度高于预期?

时间:2014-04-03 16:14:06

标签: javascript d3.js

我将两个'p'标签附加到虚拟页面的主体上,如下所示:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
</head>
<body>

  <h1>Hello world</h1>
  <p></p>
  <p></p>
</body>
</html>

然后我运行以下命令将一个数字的数组绑定到第一个'p'标签,并返回D3的所有'p'标签的退出选择:

d3.selectAll('p').data([1]).exit();

d3然后返回以下内容(从Chrome Dev Tools控制台复制):

[ Array[2]             
1: p
length: 2
parentNode: html
__proto__: Array[0]
]

我没有在这个数组中看到第0个元素,但我确实看到了第1个元素('p'标记没有绑定数据)。 d3告诉我这个数组的长度是2,所以第0个元素是什么,为什么不在这里显示?

正切问题 - 我对exit()函数的理解是它从选择中返回未绑定到任何数据的元素。那么为什么这个数组2的长度(听起来它代表绑定和未绑定的'p'标签)而不是1(只是'p'标签没有数据绑定到它)?

1 个答案:

答案 0 :(得分:1)

退出选择来自整个选择,在您的情况下包含两个元素。这里重要的一点是选择 - 它不是一个数组。在许多方面,它的行为类似于数组,您可以使用数组执行许多操作,但这些函数依赖于自定义实现来处理选择。

所以基本上你从调试器获得的输出在这里有点误导。它是一个具有数组属性的对象(这是Chrome用来显示它的东西),但它实际上并不是一个数组。

最重要的是,正确的元素最终会出现在正确的位置,正如您所观察到的那样,情况就是如此。