我使用D3.js来动画SVG中对象的移动。
当移动物体接近目的地时,我想看到从目的地附近向物体伸出的线。这些线应该一直延伸到它们到达移动物体,然后在它继续接近目的地时保持连接。
结果应该看起来像葡萄藤伸出触摸并在其接近的最后步骤引导接近的物体。
我该怎么做?
有没有办法直接进行转换呢?
如果没有,有没有办法告诉过渡它应该使用给定的函数来根据已经过去的过渡时间来确定线的坐标?
我想后者应该是这样的,但它不起作用:
line.transition()
.duration(durationOfGrowthAndDragging)
.attr('x2', function(d, t) {
frac = Math.min(1, t / timeBeforeConnectionsReachIncomingNode);
x = x1 + (parseFloat(node.attr('cx')) - x1) * frac;
return x;
})
.attr('y2', function(d, t) {
frac = Math.min(1, t / timeBeforeConnectionsReachIncomingNode);
y = y1 + (parseFloat(node.attr('cy')) - y1) * frac;
return y;
})