D3带轴数据循环计数器(不从0开始)

D3 data loop counter with axis (not starting at 0)

大量精简代码以尝试隔离问题: http://jsfiddle.net/hq59n9yf/

有人可以解释 fiddle 控制台中显示的行为吗?

在我看来,向形状添加属性的循环计数器从 22 开始,我不知道为什么。我似乎已将问题归结为与轴有关的问题,但由于我刚刚调用了 2 个空白轴,我不明白为什么这会改变任何东西。

任何帮助都会很棒。

var data = [1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9]

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500)

var xAxis = d3.svg.axis()
    yAxis = d3.svg.axis()

console.log("Data length is " + data.length)

svg.append("g")
    .call(xAxis);

svg.append("g")
    .call(yAxis)

svg.selectAll("line")
    .data(data)
    .enter()  
  .append("circle")
    .attr("r", function(d,i) { console.log("Loop Counter " + i) })

刚意识到我是个白痴,轴是线,我正在选择它们...

[将在此处留下问题以防其他人碰巧这样做]