Question

我对D3很陌生，所以我可能忽略了解决问题的方法。我有一个世界地图（使用geoJSON和mercator投影），当我点击一个国家时，我希望投影聚焦于国家（我正在使用它从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];

除非所选国家/地区按地图边界分割，例如， as Russia in this picture

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

有没有办法让两个边界框对应一个国家的两个部分（我想不是），或者是否有可能让俄罗斯最左边和最右边的点独立于旋转，然后获得他们在当前的位置因此，我可以将整个国家作为一个中心吗？

我迷失在这里所以我将非常感谢任何小费。

D3地理位置 - 专注于按地图边缘划分的国家/地区（获取与投影无关的国家/地区的坐标）

0 个答案: