D3js 链式过渡使用 .call

Question

我希望有一个函数来处理每个转换部分，并且可以使用.call进行链式调用：

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

to

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

然而我感觉它破坏了“流畅性”。

- muyueh

Answer 1

引用自文档：

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

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

- Lars Kotthoff