5

我有一个 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 元素上设置单独的过渡，因为我需要保证两个元素完全同时移动。

4

2 回答 2

2

没有tick过渡事件，因此您无法完全按照自己的意愿行事。但是，不需要这样做——您可以像添加矩形一样简单地向行尾添加过渡。代码看起来像这样。

rect.transition().attr("x", newX).attr("y", newY);
line.transition().attr("x2", newX).attr("y2", newY);
于 2013-11-14T09:20:30.253 回答
2

在转换的每个滴答声中调用函数的方法是transition.tween().

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

于 2014-05-15T13:16:19.570 回答