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.
Comments
Post a Comment