七次吃九次:为什么在这个d3选择中跳过我的索引8？

Question

我正在编写一个D3脚本，它包含一个函数drawWorkingLife，它将11个图像附加到一个SVG中。我注意到脚本跳过了第8张图片的后面。

为了进行调试，我可以看到，如果我在console.log中为图像添加了x和y属性，那么索引8就不会被记录。

在下面的函数drawWorkingLife中，为什么索引8没有登录到控制台？

演示：http://radiocontrolled.github.io/sevenAteNine

存储库：https://github.com/radiocontrolled/sevenAteNine

function drawWorkingLife() {
 var work = svg.selectAll("image")
  .data(workingLife, function(d,i) { 
    return d[i]; 
  })
  .enter()
  .append("g");

  work
  .append("svg:image")
  .attr(opts)
  .attr({
    "x" : function(d,i) {
      console.log(i);
      // why is index 8 skipped? 

    },
    "y" : function(d,i) {
      console.log(i);
      // why is index 8 skipped? 
    },       
    "class" : function(d,i){
      return d;
    }
  })
  .transition()
  .duration(1000)
  .style("opacity", 1);

}

Answer 1

问题在于将数据与所选内容关联的代码：

.data(workingLife, function(d,i) { 
  return d[i]; 
})

该调用的第二个参数是一个函数，它告诉D3如何唯一地标识每个数据值。您正在返回数据的i第四个字符(在您的示例中，这些字符都只是一个字符串)。您的字符串都是"workingLife"，"i“字符在该字符串中出现两次。因此，您已经告诉D3数据值4和数据值8是相同的。因此，D3认为第八个值是一个重复值。