1

我对 D3 很陌生，所以我可能忽略了解决问题的方法。我有一张世界地图（使用 geoJSON 和墨卡托投影），当我点击一个国家时，我希望投影集中在这个国家上（我使用的是从 d3.geo.path() 计算的边界框，所以它可以缩放并将国家翻译为中心）。见代码：

var projection = d3.geo.mercator()
                        .scale(width/7)
                        .translate([width / 2, height / 2]);

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

// relevant snippet from function clicked(d)
    // Zoom on a clicked country 
    var bounds = path.bounds(d),                // [[left, top], [right, bottom]]
        dx = bounds[1][0] - bounds[0][0],       // right - left
        dy = bounds[1][1] - bounds[0][1],       // bottom - top
        x = (bounds[0][0] + bounds[1][0]) / 2,  // (left - rigth) / 2
        y = (bounds[0][1] + bounds[1][1]) / 2,  // (top - bottom) / 2
        scale = .9 / Math.max(dx / width, dy / (height - menu_height)),
        translate = [width / 2 - scale * x, height / 2 - scale * y - menu_height / 2];

这很好用，除非所选国家被地图的边界分割，例如 这张照片中的俄罗斯

在这种情况下，它的边界框对应于整个地图的宽度，因此它不会检测到国家的“中心”，并且无法正确翻译或缩放国家。

有没有办法获得对应于一个国家的两个部分的两个边界框（我想不是），或者是否有可能获得俄罗斯的最左边和最右边的点而不依赖于旋转，然后在当前投影中获得它们的位置所以我能以整个国家为中心吗？

我在这里迷路了，所以我将非常感谢任何提示。

4

0 回答 0