javascript - 在 d3 转换期间响应滴答事件

Question

我有一个 svg 线元素，它指向一个 svg 矩形元素。当矩形移动时，线需要跟随它。当使用 d3 转换移动矩形时，有没有办法做到这一点？我正在寻找能让我响应矩形过渡的每个滴答声的东西。为 force layout simulations 提供了类似的东西:

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()如果它可以监听转换滴答事件，则可以执行此操作，但它只能监听转换开始和结束事件。

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

Answer 1

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

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