svg - D3 变换缩放和平移

Question

我试图了解转换在 D3 中是如何工作的，但我想我没有明白。

比例会改变 SVG 对象的大小吗？意思是如果我给出一个大数字，对象的大小会看起来更大？翻译是否将对象从一个地方移动到不同的地方？我试过了，但它并没有像我想象的那样工作。

你能向我解释一下它应该如何工作吗？

Answer 1

^{Scott Murray 对此[1]}写了一个很好的解释。例如，对于代码片段：

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + h + ")")
    .call(xAxis);

他解释使用以下内容：

请注意，我们使用 attr() 将变换作为 g 的属性应用。SVG 变换非常强大，可以接受多种不同类型的变换定义，包括缩放和旋转。但是我们在这里保持简单，只有一个平移变换，它只是将整个 g 组上下推了一些。

平移变换用 translate(x,y) 的简单语法指定，其中 x 和 y 显然是平移元素的水平和垂直像素数。

[1]：来自第 8 章，“清理” Web 的交互式数据可视化，它曾经免费提供，现在需要付费。

Answer 2

转换是 SVG 转换（有关详细信息，请查看标准；这里有一些示例）。基本上，缩放和平移将各自的变换应用到坐标系，这在大多数情况下应该可以按预期工作。但是，您可以应用多个变换（例如先缩放然后平移），然后结果可能不是您所期望的。

使用变换时，请记住它们会变换坐标系。原则上，你说的是真的——如果你对一个对象应用大于 1 的比例，它会看起来更大，并且平移会将它移动到相对于其他对象的不同位置。

Answer 3

我意识到这个问题已经相当老了，但想分享一个关于组变换、路径/形状和相对定位的快速演示，供其他在这里找到更多信息的人使用：

http://bl.ocks.org/dustinlarimer/6050773