svg - D3 变换缩放和平移

Question

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

缩放会改变 SVG 对象的大小吗？意思是如果我给出一个很大的数字，物体的大小会看起来更大？平移是否将对象从一个地方移动到另一个地方？我尝试了一下，但并没有像我想象的那样有效。

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

Answer 1

Scott Murray 对此进行了精彩的解释^[1]。例如，对于代码片段:

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

他使用以下内容进行解释:

Note that we use attr() to apply transform as an attribute of g. SVG transforms are quite powerful, and can accept several different kinds of transform definitions, including scales and rotations. But we are keeping it simple here with only a translation transform, which simply pushes the whole g group over and down by some amount.

Translation transforms are specified with the easy syntax of translate(x,y), where x and y are, obviously, the number of horizontal and vertical pixels by which to translate the element.

[1]:摘自 Interactive Data Visualization for the Web 第 8 章“清理” ，它曾经是免费提供的，现在是付费墙。