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

Why is d3 exit() length higher than expected?

本文关键字：高于预 d3 exit 为什么      更新时间：2023-09-26

我在虚拟页面的正文中附加了两个"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"标签，并返回所有"p"标签的 D3 退出选择：

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

然后，d3 返回以下内容（从 Chrome 开发工具控制台复制）：

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

我在这个数组中没有看到第 0 个元素，但我确实看到了第一个元素（没有绑定数据的"p"标签）。 d3 告诉我这个数组的长度是 2，那么第 0 个元素是什么，为什么它不显示在这里？

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

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

所以基本上你从调试器获得的输出在这里有点误导。它是一个具有数组某些属性的对象（这是 Chrome 用来显示它的对象），但它并不是真正的数组。

最终重要的是正确的

元素最终出现在正确的位置，正如您所观察到的，情况就是如此。

相关文章：