Dictionary D3.geo：给定geojson对象的响应帧？

我用迈克·博斯托克的密码来解释

守则的重要部分如下：

var width = 960,
    height = 500;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("/d/4090846/us.json", function(error, us) {
  var states = topojson.feature(us, us.objects.states),
      state = states.features.filter(function(d) { return d.id === 34; })[0];

/* ******************* AUTOCENTERING ************************* */
// 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);
/* ******************* END *********************************** */

// Landmass
  svg.append("path")
      .datum(states)
      .attr("class", "feature")
      .attr("d", path);

// Focus 
  svg.append("path")
      .datum(state)
      .attr("class", "outline")
      .attr("d", path);
});

例如，放大以下内容：

如何在目标topo/geo.json上居中缩放，并调整svg帧尺寸，使其在每个尺寸上都有5%的余量？

Mike解释道 基本上，Mike的代码通过

var width = 960, height = 500;
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

一旦几乎没有设置帧，那么您可以检查最大限制比率，这样您的geojson形状就可以将svg帧填充到相对于svg帧维度宽度和高度的最大维度上。Aka，如果形状的宽度与帧宽度或形状高度与帧高度的比值最高。这反过来有助于通过

1/最高比率重新计算比例

，使形状尽可能小。这一切都是通过：

var b = path.bounds(state),
    s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height);
// b as [[left, bottom], [right, top]]
// (b[1][0] - b[0][0]) = b.left - b.right = shape's width
// (b[1][3] - b[0][4]) = b.top - b.bottom = shape's height

然后，刷新您得到的缩放和过渡：

新框架 围绕geojson形状构建框架实际上是Mike代码的简化。首先，设置临时svg维度：

var width = 200;
var svg = d3.select("body").append("svg")
    .attr("width", width);

然后，获取形状的尺寸并计算其周围的尺寸：

var b = path.bounds(state);
    // b.s = b[0][1]; b.n = b[1][1]; b.w = b[0][0]; b.e = b[1][0];
    b.height = Math.abs(b[1][1] - b[0][1]); b.width = Math.abs(b[1][0] - b[0][0]);
var r = ( b.height / b.width );
var s = 0.9 / (b.width / width);                                // dimension of reference: `width` (constant)
//var s = 1 / Math.max(b.width / width, b.height / height );    // dimension of reference: largest side.
var t = [(width - s * (b[1][0] + b[0][0])) / 2, (width*r - s * (b[1][1] + b[0][1])) / 2]; //translation

刷新投影和svg的高度：

 var proj = projection
      .scale(s)
      .translate(t);
  svg.attr("height", width*r);

完成后，适合预先分配的

width=150px

，找到所需的高度，并正确缩放。请参阅

---

这只是计算出的维度加上5%，还是我遗漏了什么？拉尔斯，你说得对，我只是把它写下来（答案来了！）