javascript - 七吃九 : Why is my index 8 being skipped in this d3 selection?

Question

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

为了调试，我可以看到，如果我在为图像添加 x 和 y 属性的地方使用 console.log，则不会记录索引 8。

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

演示:http://radiocontrolled.github.io/sevenAteNine
repo :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 认为第 8 个值是重复的。