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：

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

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

D3js使用.call链接转换

1 个答案: