在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() 可以做到这一点，如果它能够监听转换的刻度事件，但它只能监听转换的开始和结束事件。

我不想为线条元素设置单独的转换，因为我需要保证两个元素完全同时移动。

- pvans

Answer 1

在过渡中没有“tick”事件，因此您无法完全按照所需方式操作。但是，实际上并不需要这个事件--您可以像对矩形一样为行末添加过渡效果。代码应该如下所示。

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

- Lars Kotthoff

Answer 2

在每次转换的时候调用函数的方法是使用transition.tween()。

你需要传递一个名称和工厂函数。名称只是一个标识符。工厂函数会对转换中的每个元素调用一次，并应返回要在该元素上每次执行的函数。

- Robin Houston