我对 d3 enter() 和 exit() 选择有什么误解？答案

【问题标题】：What am I misunderstanding about the d3 enter() and exit () selections?我对 d3 enter() 和 exit() 选择有什么误解？
【发布时间】：2015-06-17 11:20:10
【问题描述】：

我正在学习 D3。在此示例中，我使用简单的数字列表作为数据添加段落。我尝试做以下事情：

从包含 5 个元素的列表开始。当我调用 update() 时，我认为 enter 选择应该包含 5 个段落，exit() 选择应该是空的。
向数据添加一个数字。输入选择应包含该单个段落，而退出选择应为空。
删除除两个之外的所有数字。此处退出选择应包含 4 个段落，输入选择应为空。

然而，这不是我看到的！我让更新函数打印元素的数量，如下所示：

console.log('paras: '+paras[0].length+ ' enter: '+parasE[0].length + ' exit: '+paras.exit()[0].length);

而且，对于它被调用的 3 次，我得到这个输出：

"paras: 5 enter: 5 exit: 5" 
"paras: 6 enter: 6 exit: 6"
"paras: 6 enter: 6 exit: 6"

据我了解，由于我使用索引来进行数据连接（而不是键），因此退出选择或输入选择始终为空。是我误解了这一点，还是我使用了错误的方法来检查选择中有多少元素？

似乎每次都删除并重新添加所有元素（这就是进入和退出选择都已满的原因）。我误会了什么？

谢谢，路易丝

完整示例代码（将从本地 HTML 文件运行）：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>D3 Hello World</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script>
  </head>
  <body>
    <script type="text/javascript">

d3.select("body").append("span")
    .text("Hello, world!");

    data1=[1,2,3,4,5];

    function update(){
      paras=d3.select('body').selectAll('p').data(data1);

      parasE=paras.enter();

      console.log('paras: '+paras[0].length+ ' enter: '+parasE[0].length + ' exit: '+paras.exit()[0].length);

      paras.enter().append('p').html(function(d){return d});

      paras.exit().remove();  
    }

    update();
    data1.push(10);
    update();
    data1=[1,2];
    update(); 

    </script>
  </body>
</html>

【问题讨论】：

标签： d3.js

【解决方案1】：

原因是 D3 选择不完全是数组，不应该这样对待。特别是（来自the documentation）：

一个细微差别是选择是分组的：每个选择不是一个一维数组，而是一个元素数组的数组。

您只是获得了错误选择数组的大小。使用.size() 获取选择的大小：

console.log('paras: '+paras.size()+ ' enter: '+parasE.size() + ' exit: '+paras.exit().size());

完整示例here。

【讨论】：

谢谢！毕竟我确实理解了 :) 我确实尝试过使用 size，但我使用的是旧版本的 d3，它还不存在。