1

我是一个 D3 菜鸟，试图找出转换并希望使用多个数据集。我查看了其他问题，但没有找到使用两个数据集的答案。这个jsfiddle显示了我正在尝试做的事情。我正在构建一个应用程序来帮助入门统计学生抽取随机样本。他们将设置概率——圆环图的一部分——并选择要抽样的抽奖次数。然后甜甜圈转动，样品弹出一个圆圈。

两个数据集：一个（pieData）保存圆环图的值和标签。
另一个（drawData）从 360 到 720 的随机值。最终两者都将在 R 中生成并使用 RJSONIO 和闪亮传递到 D3。（那部分有效，jsfiddle显示了问题）

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

甜甜圈上的旋转动画需要drawData。我的 jsfiddle 用 for 循环笨拙地做到了，但我只能看到最后一次绘制的角度（五次），而不是每次看到五个不同的角度。

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

for (var i = 0; i < nDraws; i++) {
  ndx = i
  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”没有通过。这是我在圈子上的过渡，效果很好：

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

我错过了如何很好地构建程序的要点。我找到的最接近示例的是链式转换，从中我了解到圆和弧都需要属于一个共同的父级，我应该将两个转换应用于父级。

对于这些问题，我们将不胜感激：

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

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

3) 功能并不像我希望的那样为我工作。我想我正在尝试返回对象，但 d3 希望返回是函数（？）

非常感谢您提供学习如何将所有部分组合在一起的地方。D3的情节很精彩。

吉姆RC

4

1 回答 1

0

感谢 NoahRC 给了我一个解决方案。第一段代码应该在循环之前定义“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);
}

第二个块将找到“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);
});

Traces 显示我被设置为 data.nDraws + 1，所以它不能用作提取器。

于 2013-05-27T02:56:20.697 回答