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]：来自Interactive Data Visualization for the Web的第8章“清理”，它曾经是免费提供的，现在位于付费墙后面。

Answer 2

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

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

Answer 3

我意识到这个问题相当陈旧，但是想要分享一个群组转换，路径/形状和相对定位的快速演示，以及其他在这里寻找更多信息的人：

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

D3变换缩放和翻译

3 个答案: