为给定元素获得活动（运行）D3 v3过渡的标准方法是什么？ [英] What is the standard way to get the active (running) D3 v3 Transition for a given element?

问题描述

在D3 版本3 中，给出了D3的抽象，元素（例如圆形）和仅给出一个元素可能会运行的一个过渡。

我知道我可以手动检查 __transition __ （虽然有帮助有欢迎），但我真的希望有点高一点。

我的更大的目标是创建一个子转换if-and-only - 如果有一个转换到子。

解决方案

另一种方法：在每个节点上创建自己的属性存储实际 d3.transition 对象的数组。当创建一个新的转换时，从数组中获取最后一个转换并创建一个子转换。

复杂性是，新的转换可能不是基于相同的选择作为活动转变。因此，我在 .each（）调用中的每个元素基础上创建新的安全转换。

  function saveTransition（t）{
 //立即保存转换（不要等待开始）
 //在end b $ b 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？ ：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 ，100px）; 
 
 setTimeout（function（）{
 console.log（blue）; 
 
 d3.selectAll（div.blue）
。每个（function（）{
 newSafeTransition（this）.style（color，blue）; 
}）; 
}，1000）; 
 
 setTimeout（function（）{
 console.log（reposition）; 
 
 d3.selectAll（div.foo）
。每个（function（）{
 newSafeTransition（this）.style（left，0px）; 
}）; 
}，2000）; 
  

http://jsfiddle.net/7SQBe/3/

它可能会被清除，你甚至可以覆盖 selection.transition（）和 transition.transition（）方法。但是，您可能想要保留一种方法，以指示您是否要在任何计划的转换后将新转换排入队列，或者是否要中断。

The abstractions of D3 still make my mind bend, so hopefully I'm presenting this correctly.

In D3 version 3, given an element (say a circle), and given only one transition possibly running per element what is the best way to determine what the current running transition on that element is, if there is one at all?

I'm aware that I can manually inspect __transition__ on the element (though help there is welcome too), but I'm really hoping for something a little higher-level.

My larger goal here is to create a subtransition if-and-only-if there's a transition to sub. Otherwise, I'll be creating a new transition.

解决方案

Another way to do it: Create your own property on each node that stores an array of the actual d3.transition objects. When creating a new transition, grab the last transition from the array and create a sub-transition.

The complication is that your new transition may not be based on the same selection as the active transition. Therefore, I create the new "safe" transitions on a per-element basis within an .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/

It could probably be cleaned up, you could even over-write the selection.transition() and transition.transition() methods to do this automatically. However, you'd probably want to keep a way to indicate whether you want to queue the new transition after any scheduled transitions or whether you want to interrupt.

这篇关于为给定元素获得活动（运行）D3 v3过渡的标准方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！