Question

我想同时缩放和翻译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)");`

这也不行。请帮帮我。

Answer 1

center(0,0)不是与transform，as per the spec一起使用的有效转化定义。

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

此外，每次拨打.attr('transform', ...)时，都会覆盖transform属性的旧值。这就是您在翻译时丢失原始缩放的可能原因。最好的解决方案是将vis元素放在g内，transform属性中的缩放位置保持不变。

如何扩展和翻译？

1 个答案: