在 D3.JS 中的链式转换中进行多次延迟答案

【问题标题】：Make multiple delays in chained transitions in D3.JS在 D3.JS 中的链式转换中进行多次延迟
【发布时间】：2017-01-28 17:31:57
【问题描述】：

我正在将一个矩形从图片中的点 a 移动到点 i，我想为每个点标记 5 秒的停止延迟（有 8 个点）。转换在下面的代码中工作正常（延迟仅适用于点 b）。问题是我无法为其他转换添加更多延迟。

有什么办法吗？

提前谢谢大家。

function TRANSITION(access,dur=10000,Delay=5000,b=390.5,c=523,d=632.5,e=810.8,f=942.5,g=1063,h=1196,i=1334.5)
            {
                access.transition().duration(dur).attr('x',b)
                .transition().delay(Delay).duration(dur).attr('x',c)
                .transition().duration(dur).attr('x',d)
                .transition().duration(dur).attr('x',e)
                .transition().duration(dur).attr('x',f)
                .transition().duration(dur).attr('x',g)
                .transition().duration(dur).attr('x',h)
                .transition().duration(dur).attr('x',i)
            }

【问题讨论】：

您想移动一个点，等待 5 秒，移动下一个点，等待 5 秒，等等...？什么是访问？点的选择？

标签： javascript d3.js transition nvd3.js mongoid3

【解决方案1】：

您可以添加一个不更改属性但仍具有持续时间的过渡：

.transition()
.duration(dur)
.attr('x',d)
.transition()    // don't transition anything
.duration(5000)  // but take five seconds doing it
.transition()
.duration(dur)
.attr('x',e)

我只在版本 4 中对此进行了测试，因此这可能在版本 3 中不起作用。或者，如果您要保留某些属性相同，您可以在延迟转换中添加 .attr 行。

【讨论】：