D3变换缩放和翻译

Question

我试图理解变换在D3中是如何工作的,但我想我没有得到它.

比例是否会改变SVG对象的大小？意思是如果我给出一个大数字,对象的大小会变大吗？翻译是否将对象从一个地方移动到另一个地方？我尝试过,但它没有像我想的那样工作.

你能告诉我它应该如何运作吗？

Answer 1

斯科特·默里(Scott Murray)对此作了很好的解释^[1].例如,对于代码段:

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

他解释说使用以下内容:

请注意,我们使用attr()将transform应用为g的属性.SVG变换非常强大,可以接受几种不同的变换定义,包括缩放和旋转.但是我们在这里保持简单只有一个翻译变换,它只是将整个g组上下推动了一些量.

使用translate(x,y)的简单语法指定转换变换,其中x和y显然是用于转换元素的水平和垂直像素的数量.

[1]:来自Web的交互式数据可视化的第8章"清理" ,它曾经是免费提供的,现在位于付费专区之后.

Answer 2

转换是SVG转换(有关详细信息,请查看标准).基本上,缩放和平移将相应的变换应用于坐标系,在大多数情况下,坐标系应该按预期工作.但是,您可以应用多个转换(例如,第一个比例然后翻译),然后结果可能不是您所期望的.

使用变换时,请记住它们会变换坐标系.原则上,你所说的是真的 - 如果你将一个比例> 1应用于一个对象,它会看起来更大,一个翻译会将它移动到相对于其他对象的不同位置.

Answer 3

我意识到这个问题相当陈旧,但是想要分享一个关于群组变换,路径/形状和相对定位的快速演示,对于那些在这里寻找更多信息的人来说:

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