我希望有一个函数来处理每个转换部分,并且可以使用.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)})
然而我感觉它破坏了“流畅性”。