使用 .call 的 D3js 链接转换

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

引用文档：

无论指定函数的返回值如何，调用运算符始终返回当前选择。

这就是为什么你的第一个代码片段不起作用。您必须使用类似第二个片段的东西。