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

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如何唯一地识别每个数据值。您将返回数据的第1个CCD_字符（在您的示例中，这些字符都只是一个字符串）。您的字符串都是"workingLife"，并且"i"字符在该字符串中出现两次。所以您已经告诉D3，数据值4和数据值8是相同的。因此，D3认为第8个值是重复的。