使用两个数据集的d3转换

我是一个D3 noob，试图找出转换并希望使用多个数据集。我查看了其他问题，没有找到使用两个数据集的答案。这 jsfiddle显示了我想要做的。我正在构建一个应用程序来帮助介绍统计学生抽取随机样本。他们将设置概率 - 甜甜圈图的一部分 - 并选择抽样数量。甜甜圈转动，样本弹出成圆形。使用两个数据集的d3转换

两个数据集：一个（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)"); 
    }); 
}

我已经创建了另一个计数器在我的函数中使用，因为“我”没有得到通过。这是我的过渡圆确实工作：

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

而我错过了关于如何很好地构造程序的观点。我发现的最接近的例子是 chained transitions，从中我已经了解到，圆和圆都需要属于一个共同的父亲，并且我应该将两个过渡应用到父亲。

帮助将这些问题大加赞赏：

1）我可以结合我的两个数据集（与行的不同列和不同数量

2）我将如何建立一个家长包含两者兼而有之？甜甜圈和取样圆圈，以及如何为它提供两个数据集？

3）函数不适合我，因为我希望他们。我想我试图返回对象，但D3想要返回成为函数（？）

非常感谢提前了解如何将各个部分放在一起的位置。 D3地块是美好的。

JimRC

来源

2013-05-14 user2379489

感谢NoahRC谁给了我一个解决方案。第一个代码块应该定义的“我”的循环之前的功能：

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

痕迹表明，我是越来越设为data.nDraws + 1，所以它不能用作提取器。

来源

2013-05-27 02:56:20 user2379489

使用两个数据集的d3转换

回答

相关问题