data binding - d3 transitions using two datasets -

i'm d3 noob trying figure out transitions , wanting work multiple datasets. i've looked thru other questions, , not found answer use of 2 datasets. jsfiddle shows i'm trying do. i'm building app intro stat students draw random samples. set probabilities -- portions of donut chart -- , choose number of draws sample. donut turns , sample pops circle.

two datasets: 1 (piedata) holds values , labels donut chart.
(drawdata) random values 360 720. both generated in r , passed d3 using rjsonio , shiny. (that part works, jsfiddle shows problem)

i've defined donut arcs based on dataset piedata attached g.slices svg object. added circles, , gave them drawdata identify colors.

the rotation animation on donut needs drawdata. jsfiddle clumsily loop, see last draw's angle (five times) instead of seeing 5 different angles each once.

i lacking understanding of several key points: i've defined function within loop know no-no. here's loop on number of draws spins donut right number of times, same angle (last one).

for (var = 0; < ndraws; i++) {   ndx =   arcs.transition()     .delay((slideduration + spinduration) * ndx)     .duration(spinduration)     .ease("cubic-out")     .attrtween("transform", function () {     return d3.interpolatestring("rotate( 0, 0, 0)",         "rotate(" + spinangle[ndx] + ", 0, 0)");   }); } 

i've created counter use inside function because "i" didn't passed through. here's transition on circles work ok:

circles.each(function(d,i){    var  ndx = ;   d3.select(this).transition()       //  toss out circle       .delay(spinduration + (slideduration + spinduration) * ndx )       .duration( slideduration )       .ease("linear")       .attr("cx", function(d,i) { return ndx * spacing - w /2 ; })       .attr("cy", 135)       .attr("r", 20); }); 

and i'm missing point on how structure program nicely. closest i've found example chained transitions, i've learned both circles , arcs need belong common parent, , should apply 2 transitions parent.

help appreciated these questions:

1) can combine 2 datasets (with different columns , different numbers of rows?

2) how build parent contain both donut , sampled circles, , how feed 2 datasets?

3) functions not working me i'd them to. think i'm trying return objects, d3 wants returns functions (?)

many in advance places learn how fit pieces together. d3 plots wonderful.

jimrc

thanks noahrc gave me solution. first block of code should define function of "i" before loop:

var tween = function(i){   arcs.transition()   .delay((slideduration + spinduration) * i)   .duration(spinduration)   .ease("cubic-out")   .attrtween("transform", function (){      return d3.interpolatestring("rotate( 0, 0, 0)",                           "rotate(" +  data.spinangle[i] + ", 0, 0)");   });   }  for( var = 0; < data.ndraws; i++){      tween(i); } 

and second block find "i":

circles.each(function(d,i){   d3.select(this).transition()     .delay(spinduration + (slideduration + spinduration) * )     .duration( slideduration )     .ease("linear")     .attr("cx", function() { return * spacing - w /2 ; })     .attr("cy", 135)     .attr("r", 20); }); 

traces showed getting set data.ndraws + 1, wouldn't work extractor.