另一种方法是:在每个存储实际数据数组的节点上创建自己的属性d3.transition
对象。创建新过渡时,从数组中获取最后一个过渡并创建子过渡。
复杂的是,您的新过渡可能不基于与活动过渡相同的选择。因此,我在每个元素的基础上创建新的“安全”转换.each()
call.
function saveTransition(t) {
//save the transition immediately (don't wait for "start")
//clear it on "end"
t.each(function() {
var tArr = this.__tObj__
if (!tArr) tArr = this.__tObj__ = [];
tArr.push(t);
//console.log("saving ", t, " for ",this);
} )
.each("end", function() {
var test = this.__tObj__.shift();
// console.log("clearing ", t, " from " ,this,
// (test == t ? "correctly" : "ERROR") );
} );
}
function newSafeTransition(node) {
var tArr = node.__tObj__;
if ( tArr && tArr.length ) {
var t = tArr[ tArr.length - 1 ];
return t.filter( function(){ return this === node; } )
.transition().call(saveTransition);
}
else {
return d3.select(node).transition().call(saveTransition);
}
}
d3.selectAll("div.foo")
.transition().duration(3000)
.call( saveTransition )
.style("left", "100px");
d3.selectAll("div.bar")
.transition().duration(3000)
.call( saveTransition )
.style("top", "100px");
setTimeout( function() {
console.log("blue");
d3.selectAll("div.blue")
.each( function() {
newSafeTransition(this).style("color", "blue");
});
}, 1000);
setTimeout( function() {
console.log("reposition");
d3.selectAll("div.foo")
.each( function() {
newSafeTransition(this).style("left", "0px");
});
}, 2000);
http://jsfiddle.net/7SQBe/3/ http://jsfiddle.net/7SQBe/3/
它可能会被清理,你甚至可以覆盖selection.transition()
and transition.transition()
自动执行此操作的方法。但是,您可能希望保留一种方法来指示是否要在任何计划的转换之后对新转换进行排队,或者是否要中断。