D3 值键的匹配方式是否与使用 enter() 时默认索引号的匹配方式相同？

Question

我运行通过一些 D3.js 代码 (a great explanation of keys, by index and by value)，并且遇到了一个关于使用值作为键的问题。在以下代码片段中，我使用索引作为 selection.data() 函数中的键：

<body>
     <div id="example2">
        <p>Already existing paragraph 1</p>
        <p>Already existing paragraph 2</p>
     </div>
 <script type="text/javascript">
     pdata = [10,12,6,8,15];

     selectDIV = d3.select("#example2");

    selectDIV.selectAll("p")
         .data(pdata)
         .enter()
         .append("p")
         .text(function(d){return d;});
 </script>
 </body>

那么输出将是

Already existing paragraph 1

Already existing paragraph 2

6

8

15

这是有道理的，因为我们在现存数组中已经有 2 个 <p> 元素，并且因为我们使用元素索引作为键，所以只有索引号不是已经存在的元素将添加礼物。

为了了解键的工作原理，我尝试了一个使用元素值而不是元素索引号的键函数：

<body>
     <div id="example3">
        <p>1</p>
        <p>Already existing paragraph 2</p>
     </div>
     <script type="text/javascript">
         pdata = [1,"Already existing paragraph 2",6,8,15,15];

         selectDIV = d3.select("#example3");

        selectDIV.selectAll("p")
             .data(pdata, function(d){return d;})
             .enter()
             .append("p")
             .text(function(d){return d;});
     </script>
 </body>

在这种情况下，输出恰好是

1

Already existing paragraph 2

1

Already existing paragraph 2

6

8

15

15

所以，如果我使用值作为键，为什么如果 <p> 标签中的值与我指定的数组中的 <p> 标签值相匹配，这些值被写了两次？我会认为字符串 "Already existing paragraph 2" 在两个已经创建的 <p> 标签数组中的存在意味着任何具有相同值的元素都不会重复出现？

或者，实际上是这样吗，我是不是太像 JS n00b 而没有意识到 D3 将它们视为不同的值？

如果只是匹配数组索引号来过滤 enter() 选择的情况，我很难确定在使用值作为键时何时会出现重叠。

Answer 1

在您的第二个示例中，您使用绑定到元素的数据作为键 (d)，而不是 分配给它的文本值 --两个恰好是一样的。没有数据绑定到现有的两个元素，因此没有匹配项，所有内容都在 enter() 选择中结束。

要达到您要的效果，您需要在执行代码之前"bind"将数据添加到现有元素中：

d3.selectAll("p").each(function() { this.__data__ = d3.select(this).text(); })

D3 值键的匹配方式是否与使用 enter() 时默认索引号的匹配方式相同？

Are D3 value keys matched in the same way that default index numbers are when using enter()?

javascript

d3.js