Question

我正在从图片中的点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)
            }

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中对链式转换进行多次延迟

1 个答案: