javascript - 为给定元素获取事件(运行)D3 v3 转换的标准方法是什么?

标签 javascript d3.js transitions

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);

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

它可能会被清理干净,您甚至可以重写 selection.transition()transition.transition() 方法来自动执行此操作。但是,您可能希望保留一种方法来指示您是要在任何计划的转换之后对新转换进行排队还是要中断。

关于javascript - 为给定元素获取事件(运行)D3 v3 转换的标准方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13844179/

相关文章:

javascript - 如何从对象数组中获取最大值以在 d3.scale.linear().domain() 中使用

javascript - 更改 d3 SVG Canvas 的缩放级别?

android - Corona SDK 中的转换

ios - SpriteKit crossFadeWithDuration : between scenes not working as expected

javascript - 为什么滚动使用中间点击暂停间隔事件?

javascript - 如果本地存储为空,则不执行任何操作。如果没有,那就做点什么

javascript - $.getJSON 是用 IE 和 Opera 浏览器返回一个文件

javascript - D3 转换不运行

jquery - 有没有办法在 css 转换发生时阻止所有操作?

javascript - 关于javascript中的tofixed函数