D3js：如何垂直拉伸物体？

Question

我得到了拉/长投影的地图，在高纬度地区变得相当平坦，例如：

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

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

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

Answer 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>元素上设置转换。