D3js：如何垂直拉伸对象？答案

【问题标题】：D3js: How to stretch object vertically?D3js：如何垂直拉伸对象？
【发布时间】：2013-08-27 09:06:06
【问题描述】：

我得到了一张经纬度投影的地图，在纬度较高的情况下它变得相当平坦，例如：

为了让它看起来不错，我知道我可以将它垂直拉伸 140%，例如：

另外，我怎样才能用 D3 拉伸我的 SVG 元素及其内容？（我不能使用 CSS，因为底层 SVG 本身就不好。我需要 SVG 代码被拉伸，允许下载）

注意：对于在线代码示例，我得到了India at the moment（然而，印度只需要 106% 的延伸，但同样的想法）。

【问题讨论】：

也许使用this suggestion 和您之前定义的固定高度和宽度？
这不起作用，扩展框架而不扩展内容。
会不会是投影相关的问题？你试过改变投影吗？
这确实是纬度/经度投影的一个属性，可以使物体越来越向两极变平。 Wikipedia 的地图是建立在这种 equirectangular 和相关（并提供）strechs 口粮的基础上，以对抗扁平化。所以我必须重用这个投影和这些伸展，以免干扰工作流中其他较低的系统（在维基百科上）。

标签： svg d3.js

【解决方案1】：

在 SVG 中，可以通过设置 transform 属性来缩放元素。所以拿你的形状容器做

container.setAttribute("transform", "scale(1, 1.4)");

您需要有一个可变形的容器，例如<g> 元素。 <svg> 元素在 SVG 1.1 中不可转换，但将在即将发布的 SVG 2 规范中。据我所知，目前只有 Firefox 和 Opera 支持 SVG 2 的这一部分。

如果您想使用 SVG 1.1 UA 在印度地图上进行这项工作，因为您没有可转换的容器，您可以在每个路径和文本元素上设置转换，例如

<svg>
  <path transform="scale(1, 1.4).../>
  <path transform="scale(1, 1.4).../>
  <text transform="scale(1, 1.4).../>
</svg>

您必须遍历 <svg> 元素的子元素才能做到这一点。

或者，您可以在层次结构中插入 <g> 元素，即

<svg>
  <path .../>
  <path .../>
</svg>

会变成

<svg>
  <g transform="scale(1, 1.4)">
    <path .../>
    <path .../>
  </g>
</svg>

您将遍历 <svg> 的所有子元素并将它们重新设置为 <g> 元素，然后在 <g> 元素上设置转换。

【讨论】：