d3.js - Why is the third variable in d3 anonymous function undefined when transitioning? -

say have test data

var testdata1 = [ [   {x: 1, y: 40},   {x: 2, y: 43},   {x: 3, y: 12},   {x: 4, y: 60},   {x: 5, y: 63},   {x: 6, y: 23} ], [   {x: 1, y: 12},   {x: 2, y: 5},   {x: 3, y: 23},   {x: 4, y: 18},   {x: 5, y: 73},   {x: 6, y: 27} ], [   {x: 1, y: 60},   {x: 2, y: 49},   {x: 3, y: 16},   {x: 4, y: 20},   {x: 5, y: 92},   {x: 6, y: 20}  ]  ]; 

and bind data nested objects,

var circles = svg.select("circle")     .data(testdata1)     .enter()     .append("circle") var subsel = circles.selectall("rect")     .data(function(d) {return d})     .enter()     .append("rect") 

the third variable in d3 anonymous function holds index of parent data element (as discussed more in third variable in d3 anonymous function).

before adding transition, j variable behaves expected (gives 0,1,2 each group of 6 elements).

after transitioning, however, j variable becomes undefined:

subsel.attr("foobar", function(d,i,j) {console.log(d,i,j)})     .transition()     .attr("foobar", function(d,i,j) {console.log(d,i,j)})    

what's going on?

the third variable not becomes undefined after transition. can check in fiddle: https://jsfiddle.net/gerardofurtado/4jahe31t/2/

i changed console.log show "before" , "after":

subsel.attr("foobar", function(d,i,j) {console.log("before:      x=" + d.x + " y=" + d.y + " i=" + + " j=" + j)}) .transition() .attr("foobar", function(d,i,j) {console.log("after:      x=" + d.x + " y=" + d.y + " i=" + + " j=" + j)}) 

it shows parent index, expected:

after: x=1 y=40 i=0 j=0 after: x=2 y=43 i=1 j=0 after: x=3 y=12 i=2 j=0 after: x=4 y=60 i=3 j=0 after: x=5 y=63 i=4 j=0 after: x=6 y=23 i=5 j=0 after: x=1 y=12 i=0 j=1 etc... 

i tried reproduce behaviour, copying code verbatim, i'm still getting values j.