D3 的抽象仍然让我费解,所以希望我能正确地呈现它。
在 D3 版本 3 中,给定一个元素(比如一个圆),并且 given only one transition possibly running per element确定该元素上当前正在运行的过渡是什么的最佳方法是什么(如果存在的话)?
我知道我可以手动检查元素上的 __transition__
(尽管也欢迎提供帮助),但我真的希望得到更高级别的东西。
我这里更大的目标是当且仅当存在到 sub 的过渡时创建子过渡。否则,我将创建一个新的转换。
最佳答案
另一种方法:在存储实际 d3.transition
对象数组的每个节点上创建您自己的属性。创建新过渡时,从数组中获取最后一个过渡并创建子过渡。
复杂的是您的新过渡可能与事件过渡不基于相同的选择。因此,我在 .each()
调用中基于每个元素创建了新的“安全”转换。
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);
它可能会被清理干净,您甚至可以重写 selection.transition()
和 transition.transition()
方法来自动执行此操作。但是,您可能希望保留一种方法来指示您是要在任何计划的转换之后对新转换进行排队还是要中断。
关于javascript - 为给定元素获取事件(运行)D3 v3 转换的标准方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13844179/