在 D3.JS 中对链式转换进行多次延迟

Question

我在一张图片中将一个矩形从a点移动到i点，我想为每个点标记5s的停止延迟（有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)
            }

Answer 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 行属性相同。

在 D3.JS 中对链式转换进行多次延迟

Make multiple delays in chained transitions in D3.JS

javascript

transition

d3.js

mongoid3

nvd3.js