调整旋转地球的 SVG 大小

Question

在http://bl.ocks.org/ee2dev/71316923a9cd9fb4314a中，您会看到一个旋转的地球，覆盖 250 x 250 的区域。

我需要如何更改我的代码以将周围的 SVG 设置为 300 x 250（= 我的地球的大小 + 旋转城市标签的一些水平 space）？

如有任何帮助，我们将不胜感激！

Answer 1

您将不得不对您的投影应用 translate。根据 https://github.com/mbostock/d3/wiki/Geo-Projections#translate，您会看到投影具有默认值 translate，适用于 960 x 500 的 svg。由于您现有的示例具有该大小，因此默认 translate 完全匹配。

将您的投影代码更改为：

var width = 300,
    height = 250;

...

var projection = d3.geo.orthographic()
    .scale(125)
    .translate([width/2, height/2])
    .clipAngle(90);

请注意包含对 projection 的 translate 调用，它根据 svg 的大小从默认更改为新调用。

工作示例在 http://bl.ocks.org/benlyall/272235d004c7afc8dc68

调整旋转地球的 SVG 大小

Adjusting SVG size for rotating globe

d3.js