d3.js - 给定 geoJSON 对象，在 d3 中将 map 居中

Question

目前在 d3 中，如果您要绘制一个 geoJSON 对象，则必须对其进行缩放和平移，以便将其达到所需的大小，并对其进行平移以使其居中。这是一项非常繁琐的反复试验任务，我想知道是否有人知道获得这些值的更好方法？

例如，如果我有这个代码

var path, vis, xy;
xy = d3.geo.mercator().scale(8500).translate([0, -1200]);

path = d3.geo.path().projection(xy);

vis = d3.select("#vis").append("svg:svg").attr("width", 960).attr("height", 600);

d3.json("../../data/ireland2.geojson", function(json) {
  return vis.append("svg:g")
    .attr("class", "tracts")
    .selectAll("path")
    .data(json.features).enter()
    .append("svg:path")
    .attr("d", path)
    .attr("fill", "#85C3C0")
    .attr("stroke", "#222");
});

我到底如何获得 .scale(8500) 和 .translate([0, -1200]) 而不需要一点一点地进行？

Answer 1

我的答案接近 Jan van der Laan 的答案，但你可以稍微简化一下，因为你不需要计算地理质心；你只需要边界框。而且，通过使用未缩放、未翻译的单位投影，您可以简化数学计算。

代码的重要部分是这样的:

// Create a unit projection.
var projection = d3.geo.albers()
    .scale(1)
    .translate([0, 0]);

// Create a path generator.
var path = d3.geo.path()
    .projection(projection);

// Compute the bounds of a feature of interest, then derive scale & translate.
var b = path.bounds(state),
    s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
    t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

// Update the projection to use computed scale & translate.
projection
    .scale(s)
    .translate(t);

在单位投影中计算要素的 bounding box 后，您可以通过比较边界框的纵横比 (b[1][0] - b[0 ][0] 和 b[1][1] - b[0][1]) 到 Canvas 的宽高比(宽度 和 高度)。在本例中，我还将边界框缩放到 Canvas 的 95%，而不是 100%，因此边缘上有一点额外的空间用于笔划和周围的特征或填充。

然后您可以使用边界框的中心计算平移 ((b[1][0] + b[0][0])/2和 (b[1][1] + b[0][1])/2) 和 Canvas 中心(宽度/2 和 高度/2)。请注意，由于边界框位于单位投影的坐标中，因此必须乘以比例 (s)。

例如，bl.ocks.org/4707858:

有一个相关的问题，即如何在不调整投影的情况下缩放到集合中的特定特征，即，将投影与几何变换结合起来进行放大和缩小。它使用与上面相同的原理，但数学略有不同，因为几何变换(SVG“变换”属性)与地理投影相结合。

例如，bl.ocks.org/4699541: