Question

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

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

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

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

并且，有三次它被调用，我得到这个输出：

"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>

Answer 1

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

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

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

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

完整示例here。

我对d3 enter（）和exit（）选择有什么误解？

1 个答案: