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

我想使用下面的代码在力布局有向图上对链接进行动画处理。链接是简单的线条而不是路径。我按下按钮启动动画。风格变化（在onTick中）立即发生，但问题在于动画本身需要大约10秒才能启动。难道我做错了什么？我可以加速动画的开始吗？我不得不说，一旦动画开始，动画运行得很好。D3速度问题与有向图中的链接动画

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个节点相比，小提琴中的图非常小。

来源

2014-11-05 gaitat

我认为你需要'.each（animLink）'而不是'.call（animLink）'。 – 2014-11-05 17:45:49

实际上是最糟糕的。所有节点都以（0,0）结束，并且动画根本没有启动。 – gaitat 2014-11-05 18:30:57

好的，你能提供一个完整的例子吗？ 'link'和'onTick'叫什么名字？ – 2014-11-05 18:35:00

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

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

来源

2014-11-06 09:24:24

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

回答

相关问题