2

我想同时缩放和平移 D3 力图。例如，在单击按钮时，它应该缩放到 400%，然后使自己在屏幕上居中。这一切都应该发生在平滑的动画效果中。

//animate vis to visible area 
vis.transition()
    .duration(2000)
    .attr("transform", "scale(" + someScaleValue + ")" + "center("0,0)");

这样做，缩放工作正常，但图形不居中。它向右下角移动。

vis.transition()
    .duration(2000)
    .attr("transform", "scale(" + someScaleValue + ")");

为什么我第二次翻译时比例会重置为 100%。

我也尝试过使用：

vis.transition()
    .duration(2000)
    .attr("transform", "scale(" + scaleValue + ")" + "translate(0,0)");`

这也行不通。请帮我。

4

1 回答 1

1

center(0,0)根据规范transform，不是与 一起使用的有效转换定义。

如果要将translate(0, 0)对象带到屏幕的中心（通常是 的左上角vis），则可能需要将外部元素的viewBox设置为： 。这将在元素内部设置坐标系，使中心位于。或者，您可以使用.svg"-width/2 -height/2 width height"svg(0, 0)translate(width/2, height/2)

此外，每次调用 时.attr('transform', ...)，都会覆盖transform属性的旧值。这可能是您在翻译时失去原始缩放比例的可能原因。最好的解决方案是将vis元素放在 a中，该元素在保持不变g的属性中具有缩放。transform

于 2013-01-25T13:15:39.600 回答