Javascript d3从列表中间枚举？

我正在研究的d3图表有一个相当神秘的问题

下面是我正在研究的两个数据驱动图表的代码。第一个填充条形图上的条形图，第二个填充标签：

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开始枚举中间的数据引起的：

这是为什么呢？

我昨天刚刚回答了一个类似的问题，所以很想把它作为一个复制品来结束，但还是为了子孙后代

不要使用

svg.selectAll（“text”）

和

svg.selectAll（“rect”）

，你是说给我这个svg中的所有

文本，并且无意中选择了你不想要的元素。因此，您有一个较小的输入选择，有些东西已经存在

更好的方法是：

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

我昨天刚刚回答了一个类似的问题，所以我想把它作为一个复制品来结束，但再一次为了子孙后代

不要使用
svg.selectAll（“text”）
和
svg.selectAll（“rect”）
，你是说给我这个svg中的所有
文本，并且无意中选择了你不想要的元素。因此，您有一个较小的输入选择，有些东西已经存在

更好的方法是：

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

完整的可视化代码是。正在使用的数据为。完整的可视化代码为。使用的数据是。哦，哇，这是一个相当微妙但重要的错误。好吧，我再也不会来了！非常感谢。嘿，@Mark，你为什么不发布一个关于这个反复出现的问题的问题，给自己一个非常详细的答案来解释d3的选择，接受它（当然不接受），然后在下次有人问同样的问题时用这个问题来“标记为重复”呢？哇，这是一个相当微妙但重要的错误。好吧，我不会再来了！非常感谢。嘿，@Mark，你为什么不发布一个关于这个反复出现的问题的问题，给自己一个非常详细的答案来解释d3的选择，接受它（偏离路线），并在下次有人问同样的问题时用这个问题“标记为重复”？