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认为第8个值是重复的。

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

1 个答案: