Data binding 使用两个数据集的d3转换

我是一个D3Noob，试图找出转换，并希望使用多个数据集。 我浏览了其他问题，但没有找到使用两个数据集的答案。 这显示了我正在努力做什么。 我正在开发一个应用程序来帮助intro stat学生随机抽取样本。 他们将设置概率——甜甜圈图表的一部分——并选择要取样的抽签数。然后甜甜圈转动，样品弹出一个圆圈

两个数据集： 其中一个（pieData）保存甜甜圈图表的值和标签。
另一个（drawData）是从360到720的随机值。 最终两者都将在R中生成，并使用RJSONIO和SHINK传递到D3中。 （这部分工作正常，JSFIDLE显示了问题所在）

我已经根据数据集pieData将甜甜圈定义为圆弧，我将其作为g.slices附加到svg对象。 我添加了圆圈，并给了他们drawData来识别他们的颜色

圆环上的旋转动画需要drawData。 我的JSFIDLE使用for循环笨拙地完成了这项工作，但我只能看到最后一次绘制的角度（五次），而不是每次看到五个不同的角度

我对几个关键点缺乏了解： 我在一个循环中定义了一个函数，我知道这是一个禁忌。这是我的循环次数，它将甜甜圈旋转正确的次数，但总是旋转到相同的角度（最后一个）

我没有抓住如何很好地构建程序的要点。举个例子，我发现最近的一个例子是，从中我了解到圆和圆弧都需要属于一个公共父对象，我应该对父对象应用两个过渡

如果您有以下问题，我们将不胜感激：

1） 我可以合并我的两个数据集（具有不同的列和不同的行数）吗

2） 我如何构建一个包含甜甜圈和采样圆的父对象，以及如何向它提供两个数据集

3） 函数并不像我希望的那样为我工作。我想我试图返回对象，但d3希望返回函数（？）

非常感谢您提供学习如何将所有部件装配在一起的场所。D3的情节非常精彩

---

JimRC

感谢NOAHC给了我一个解决方案。 第一个代码块应在循环之前定义“i”的函数：

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 i = 0; i < data.nDraws; i++){ 
    tween(i);
}

跟踪显示我设置为data.nDraws+1，所以它不能作为提取器工作

circles.each(function(d,i){
   var  ndx = i ;
  d3.select(this).transition()
      //  toss out the 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);
});

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 i = 0; i < data.nDraws; i++){ 
    tween(i);
}

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