두 개의 데이터 세트를 사용하여 d3 전환

Question

나는 전환을 파악하고 여러 데이터 세트로 작업하려는 D3 멍청한 놈입니다. 다른 질문을 살펴본 결과 두 데이터 집합에 대한 답변을 찾지 못했습니다. 이 jsfiddle은 내가하려는 일을 보여줍니다. 통계 학생이 무작위로 추출 할 수 있도록 앱을 제작 중입니다. 그들은 도넛 형 차트의 부분을 확률로 설정하고 샘플링 할 수를 선택합니다. 그런 다음 도넛이 돌아가고 샘플이 원으로 나타납니다.

두 개의 데이터 세트 : 하나 (pieData)는 도넛 형 차트의 값과 레이블을 보유합니다.
360부터 720까지 임의의 값을 다른 (drawData). 결국 둘 다 R로 생성되고 RJSONIO와 반짝임을 사용하여 D3으로 전달됩니다.

나는 내 svg 객체에 g.slices로 첨부 한 데이터 세트 pieData에 기반하여 호 (arc)로 도넛을 정의했습니다. 서클을 추가하고 drawData를 사용하여 색상을 식별했습니다.

도넛의 회전 애니메이션에는 drawData가 필요합니다. jsfiddle은 for 루프를 사용하여 서투르게 수행하지만, 각기 다른 각도를 보는 대신 마지막 그리기 각도 (5 회) 만 볼 수 있습니다.

저는 몇 가지 핵심 사항에 대한 이해가 부족합니다 : 저는 루프 내에서 기능을 정의했는데 그 중에는 아니오라고 정의되어 있습니다. 도넛을 원하는 횟수만큼 회전 시키지만 항상 동일한 각도 (마지막 하나)로 회전하는 드로우 횟수에 대한 내 루프가 있습니다.

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

그리고 나는 프로그램을 구조화하는 방법에 대한 요점을 놓치고 있습니다. 내가 찾은 가장 가까운 예는 chained transitions입니다. 두 원과 호가 공통 부모에 속해야한다는 것을 알았습니다. 부모에게 두 번의 전환을 적용해야합니다.

도움이 많이이 질문을 주시면 감사하겠습니다 :

1) I 행의 다른 열에 다른 번호로 (내 두 개의 데이터 세트를 결합 할 수 있습니다

2) 모두를 포함하는 부모를 구축 할 방법? 도넛 형 및 샘플링 된 원을 사용하고 두 데이터 세트를 어떻게 먹을 수 있습니까?

3) 기능이 저에게 효과적이지 않습니다. 나는 물건을 돌려 주려고 노력하고 있다고 생각하지만 d3은 반환을 기능으로 원한다. (0123) D3 플롯은 훌륭합니다.

jimrc

Answer 1

제게 해결책을 주신 NoahRC에게 감사드립니다.

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

트레이스 I로 설정하기였다 : "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); 
} 

그리고 제 2 블록 찾을 것이다 코드의 첫 번째 블록이 "I"는 루프 이전의 기능을 정의해야 data.nDraws + 1, 그래서 추출기로 작동하지 않을 것이다.