有向图中链接动画的 D3 速度问题答案

【问题标题】：D3 speed issue with link animation in directed graph有向图中链接动画的 D3 速度问题
【发布时间】：2014-11-05 15:02:12
【问题描述】：

我正在尝试使用以下代码为力布局有向图上的链接设置动画。链接是简单的线条而不是路径。我按下按钮启动动画。样式更改（在 onTick 中）会立即发生，但问题是动画本身需要大约 10 秒才能开始。难道我做错了什么？我可以加快动画的开始吗？不得不说，一旦动画开始，动画就运行得非常好。

function animLink( d )
{
    this.transition()
        .delay(0)
        .duration(10000)
        .ease( "linear" )
        .attrTween( "stroke-dashoffset", function() {
            var i = d3.interpolateString( "1000", "0" );
            return function(t) { return i(t); };
        } )
    .each( "end", function() { d3.select(this).call(animLink); } );
}

onTick = function(e)
{
    if (buttonPressed)
        link
            .style( "stroke-dasharray", "10,10" )
            .call( animLink );
}

您可以在此处查看jsfiddle。即使我指定 .delay(0)，一开始也会有 5 秒的延迟。

与我的 2000 个节点相比，小提琴中的图表非常小。

【问题讨论】：

我认为你需要.each(animLink) 而不是.call(animLink)。
实际上这让情况变得更糟。所有节点都在 (0,0) 处结束，动画根本没有开始。
好的，你能提供一个完整的例子吗？ link 是什么，onTick 在哪里调用？
用小提琴更新了问题。
不要在 tick 处理程序中调用它，它会为力布局的每次迭代创建一个新的过渡 jsfiddle.net/ykshg1uf/1

标签： javascript animation d3.js svg-animate

【解决方案1】：

问题是您调用了在强制布局的每次迭代（即tick 事件）时启动动画的代码。也就是说，您一遍又一遍地设置它，因此它实际上没有机会运行，因为新的转换会取消旧的转换。

当它实际运行时，这是因为力布局已经稳定下来，没有更多的tick 事件。解决方案：在tick事件处理程序之外调用代码。演示here.

【讨论】：