Question

我以此为参考：https://bl.ocks.org/iamkevinv/0a24e9126cd2fa6b283c6f2d774b69a2

调整了一些语法以适合版本5

缩放有效，“平移”看起来也有效，因为如果更改值，它将缩放到其他位置。

但是问题是它不能放大我单击的正确位置。

我认为这不能正确解决，因为我改用d3.geoMercator().fitSize([width, height], geoJSONFeatures)：

var bounds = path.bounds(d),
  dx = bounds[1][0] - bounds[0][0],
  dy = bounds[1][1] - bounds[0][1],
  x = (bounds[0][0] + bounds[1][0]) / 2,
  y = (bounds[0][1] + bounds[1][1]) / 2,
  scale = Math.max(1, Math.min(8, 0.9 / Math.max(dx / width, dy / height))),
  translate = [width / 2 - scale * x, height / 2 - scale * y];

已经尝试更改值以适合我的值，但失败了，我无法理解。

这是我的预测：

var width = 500;
var height = 600;

d3.json("/regions50mtopo.json")
  .then((geoJSON) => {

      var geoJSONFeatures = topojson.feature(geoJSON, geoJSON.objects["Regions.50m"]);

      // My Projection
      var projection = d3.geoMercator().fitSize([width, height], geoJSONFeatures);

 ...

有任何帮助，指南或参考吗？

注意：我正在映射其他国家/地区，fitSize（...）解决了问题很容易适合我的svg，这就是为什么我不能使用与我提供的参考链接。

Answer 1

找到答案：https://bl.ocks.org/veltman/77679636739ea2fc6f0be1b4473cf03a

centered = centered !== d && d;

var paths = svg.selectAll("path")
  .classed("active", d => d === centered);

// Starting translate/scale
var t0 = projection.translate(),
  s0 = projection.scale();

// Re-fit to destination
projection.fitSize([960, 500], centered || states);

// Create interpolators
var interpolateTranslate = d3.interpolate(t0, projection.translate()),
    interpolateScale = d3.interpolate(s0, projection.scale());

var interpolator = function(t) {
  projection.scale(interpolateScale(t))
    .translate(interpolateTranslate(t));
  paths.attr("d", path);
};

d3.transition()
  .duration(750)
  .tween("projection", function() {
    return interpolator;
});

正是我要的东西。现在可以正常工作了。

但是也许有人也对如何优化它提出了建议，因为正如作者所说，放大/缩小时感觉很慢且“缓慢”。

D3js v5在geoMercator（）。fitSize（）上缩放到边界框

1 个答案: