0

我正在尝试使用下面的代码为力布局有向图上的链接设置动画。链接是简单的线条而不是路径。我按下按钮启动动画。样式更改（在 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 个节点相比，小提琴中的图表非常小。

4

1 回答 1

0

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

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

于 2014-11-06T09:24:24.660 回答