调整旋转地球的 SVG 大小

Question

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

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

任何帮助将不胜感激！

Answer 1

您必须对投影应用translate。 根据 https://github.com/mbostock/d3/wiki/Geo-Projections#translate，您将看到投影具有适合960 x 500 svg的默认translate。 由于现有示例具有该大小，因此默认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 的工作示例