2014-04-27 4 views
2
내가 모든 전환 부분을 처리하는 기능을 가지고, 체인을 할 수 있도록하려면

그것을 .call를 사용하여 :D3js는 .call

it 
    .attr //state 1 
    .transition() 
    .duration(1000) 
    .attr //state 2 

function move(it){ 
    return it.transition().duration(1000) 
} 


it 
    .attr //state 1 
    .transition() 
    .call move 
    .attr //state 2 

에 나는 집계 할 하나의 함수 내에서 모든 전이, 조건부로 만들기. 예 아래 :

var w = 960; 
var h = 500; 
var svg = d3.select("body") 
    .append("svg") 
    .attr("width", w) 
    .attr("height", h); 



var animation = true; 


function runAnimation(it){ // this doesn't work, it will just skip the animation 
    if(animation){ 
     return it.transition() 
      .duration(1000); 
    } 
    else{ 
     return it; 
    } 
} 

svg.append("circle") 
    .attr("cx", w/2) 
    .attr("cy", h/2) 
    .attr("r", 2) 
    .call(runAnimation) 
    .attr("cx", 50) 

나는 내가 할 수있는 것을 알고 :

function runAnimation2(it, nextStep){ 
    if(animation){ 
     return it.transition() 
      .duration(1000) 
      .call(nextStep) 
    } 
    else{ 
     return it; 
    } 
} 

svg.append("circle") 
    .attr("cx", w/2) 
    .attr("cy", h/2 + 10) 
    .attr("r", 2) 
    .attr("fill", "red") 
    .call(runAnimation2, function(it){ it.attr("cx", 50)}) 

그러나 나는 그것이 "흐름"을 나누기 바랍니다.

답변

0

the documentation 인용 :

콜 조작에 관계없이 항상 지정된 함수의 리턴 값을, 현재의 선택을 리턴한다.

첫 번째 코드 조각이 작동하지 않는 이유는이 때문입니다. 두 번째 조각과 같은 것을 사용해야합니다.