D3选择html - 当传递函数时索引从1开始而不是0 [英] D3 selection html -- index starting at 1 instead of 0 when passing function

问题描述

我对这种行为感到困惑，并希望有人可能有一些见解。我有一个数组定义为：

I'm confused about this behavior and was hoping someone might have some insight. I have an array defined as:

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

我的D3脚本是这样的：

My D3 script is such:

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开始。任何人都可以看到这个问题吗？

The issue is that the index is starting on 1, so I am losing the "CPL" value. I'm logging this in the console and it clearly starts at 1 instead of 0. Can anyone see a problem with this?

谢谢！

推荐答案

看起来你已经在ID为<的元素中有一个< div> code> d3-sizemap-hr 。

It seems like you already have a <div> inside the element with an ID of d3-sizemap-hr.

这是一个问题的原因是你只填充<$中的元素c $ c> .enter（） state，现有div不会出现。

The reason this is a problem is that you are only populating elements in the .enter() state, which will not occur for the existing div.

我有以下建议：

• 使用D3为动态添加的元素设置唯一的类


• 尽可能减少 .enter（）状态，例如你的 .append（）然后任何其他不变的静态样式关于数据的变化。其他所有内容都处于更新状态。

• Always have a unique class for your dynamically added elements with D3
• Have the minimum possible for the .enter() state, such as your .append() and then any other static styles that don't ever vary based on the data changing. Everything else goes in the update state.

这篇关于D3选择html - 当传递函数时索引从1开始而不是0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！