D3 selection html -- 传递函数时索引从 1 开始而不是 0

Question

我对这种行为感到困惑，希望有人能对此有所了解。我有一个数组定义为：

arr_subpop_unique = ["CPL", "NAP", "NPL", "SAP", "SPL", "TPL", "UMW", "WMT", "XER"]

我的 D3 脚本是这样的：

var sizemapHeader = d3.select("#d3-sizemap-hr").selectAll("div")
        .data(arr_subpop_unique)
      .enter().append("div")
        .attr("class", "sizemap-hr-title ellipsis scroll_on_hover")
        .html(function(d,i){ console.log(d,i); return d; });

问题是索引从 1 开始，所以我丢失了“CPL”值。我在控制台中记录了它，它显然从 1 而不是 0 开始。任何人都可以看到这个问题吗？

谢谢！

Answer 1

您的 ID 为 d3-sizemap-hr 的元素内似乎已经有一个 <div>。

这是一个问题的原因是您只填充 .enter() 状态的元素，而现有 div 不会发生这种情况。

我有以下建议：

• 始终为您使用 D3 动态添加的元素创建一个独特的类
• 具有.enter() 状态的最小值，例如.append()，然后是任何其他不会随数据变化而变化的静态样式。其他所有内容都处于更新状态。