响应d3过渡期间的滴答事件

Question

我有一个svg线元素，它指向一个svg矩形元素。当矩形移动时，直线需要跟随它。用d3过渡移动矩形时，有没有办法做到这一点？我正在寻找使我能够响应矩形过渡的每个刻度的内容。为力布局模拟提供了类似的东西：

force.on("tick", function() {
  link.attr("x1", function(d) { return d.source.x; })
     .attr("y1", function(d) { return d.source.y; })
     .attr("x2", function(d) { return d.target.x; })
     .attr("y2", function(d) { return d.target.y; });

  node.attr("cx", function(d) { return d.x; })
     .attr("cy", function(d) { return d.y; });

});

这可用于在每个时间步移动两个元素。可以在没有布局的情况下进行任意过渡吗？transition.each()如果它可以侦听过渡标记事件，但似乎只能侦听过渡开始和结束事件，似乎可以执行此操作。

我不想在line元素上设置单独的过渡，因为我需要保证两个元素完全同时移动。

Answer 1

没有tick用于转换的事件，因此您无法完全按照自己的意愿行事。然而，应该没有必要这样做——您可以简单地以与矩形相同的方式将过渡添加到线端。代码看起来像这样。

rect.transition().attr("x", newX).attr("y", newY);
line.transition().attr("x2", newX).attr("y2", newY);