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

D3 speed issue with link animation in directed graph

本文关键字：速度 问题 动画 链接 有向图 D3      更新时间：2023-09-26

我正在尝试使用下面的代码在力布局定向图上设置链接的动画。链接是简单的线，而不是路径。我按下按钮启动动画。样式更改（在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 );
}

你可以在这里看到一把小提琴。一开始有5秒的延迟，尽管我指定了.delation（0）.

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

问题在于，您正在调用在力布局的每个迭代（即tick事件）启动动画的代码。也就是说，你一次又一次地设置它，这样它实际上就没有机会运行，因为新的转换会抵消旧的转换。

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

相关文章：