javascript - d3 从列表中间枚举？

Question

我正在处理的 d3 图表遇到了一个相当神秘的问题。

这是我正在处理的两 block 数据驱动图表的代码。第一个填充条形图上的条形，第二个填充标签:

svg.selectAll("rect")
            .data(nyb.features)
            .enter()
            .append("rect")
            .attr({
                "fill": "steelblue",
                "width": bar_width,
                "height": function(d) { return 250 - y(d.properties.distance) - 5; },
                "x": function(d, i) { return ((bar_width + 1) * i) + 55; },
                "y": function(d) { return y(d.properties.distance); }
            });

    svg.selectAll("text")
            .data(nyb.features)
            .enter()
            .append("text")
            .attr({
                "fill": "red",
                "x": function(d, i) { console.log(i); return ((bar_width + 1) * i) + 55; },
                "y": function(d) { return y(d.properties.distance); }
            })
            .text("Hello World!");

我希望这会生成一组条形图以及这些条形图的一组文本标签。

出于某种原因，这是我的输出:

检查控制台，这似乎是由于 d3 仅在中间开始枚举数据造成的:

这是为什么？

Answer 1

由于我昨天刚刚回答了类似的问题，所以想将其作为重复项关闭，但再次为子孙后代......

不要使用svg.selectAll("text")和svg.selectAll("rect")，你是说给我所有文本 在此 svg 中，并且无意中选择了您不想要的元素。因此，您的输入选择范围较小，有些东西已经存在。

更好的方法是:

svg.selectAll(".myUniqueClass")
  .data(nyb.features)
  .enter()
  .append("text")
  .attr("class", "myUniqueClass")
  ...