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

Question

Heavily stripped down code to try and isolate the problem: http://jsfiddle.net/hq59n9yf/

Could someone please explain the behaviour displayed in the console of the fiddle?

It seems to me that the loop counters in adding attributes to the shapes are beginning at 22, and I have no idea why. I seem to have got the issue down to something to do with the axes, but since I've just called 2 blank axes, I don't understand why this would change anything.

Any help would be great.

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) })

Answer 1

Just realised I'm an idiot, axes are lines and I'm selecting them...

[Will leave the question here in case someone else happens to do this]