在SVG中拟合D3贴图

Question

在这个jsfiddle中，我有一个从here拍摄的D3贴图，但我正尝试将其放入原来大小的一半的svg中。为此，我更改了：

var width = 480;
var height = 300;
.....
var path = d3.geoPath(d3.geoIdentity().translate([width/2, height/2]).scale(height*.5));

但是它不起作用。如何使地图适合svg？

Answer 1

D3的geoIdentity几乎公开了d3投影的所有标准方法（在我的头顶上，由于身份假定为笛卡尔数据，因此只能旋转）。在这里最重要的是，它公开了fitSize和fitExtent方法。这些方法根据显示的geojson数据的坐标范围和svg / canvas的像素范围来设置转换和缩放。

要使用地理标识来缩放要素，可以使用：

d3.geoIdentity().fitSize([width,height],geojsonObject)

请注意，geojson特征数组不起作用，但是geojson特征集合或任何单个特征/几何对象也可以工作。宽度和高度是svg /画布的大小。

如果要应用边距，可以使用：

d3.geoIdentity().fitExtent([[margin,margin],[width-margin,height-margin]],geojsonObject)

页边距不需要统一，格式为[[left，top]，[right，bottom]]，geojsonObject

如果使用fitSize或fitExtent，则无需设置中心，手动平移或缩放比例，然后再进行设置即可更新或重新缩放地图。