D3js使用鏈轉移.CALL

Question

我想有一個處理每一個過渡部分的功能，並能鏈它使用.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)}) 

但我覺得它打破了 「流」。

Answer 1

從the documentation報價：

調用操作總是返回當前的選擇，無論指定函數的返回值。

這就是爲什麼你的第一個代碼段不起作用。你必須使用類似於第二個片段的東西。