Question

我有一个svg line元素，它指向一个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);

Answer 2

在转换的每个刻度处调用函数的方法是transition.tween()。

您传递名称和工厂功能。该名称只是一个标识符。对于转换中的每个元素，都会调用一次工厂函数，并且应该为每个元素返回一个要在该元素上调用的函数。

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

2 个答案: