javascript - 使用 d3 对多个国家进行缩放和居中

Question

var $container = $('#map');
var width = $container.innerWidth();
var height = $container.innerHeight();
var projection = d3.geo.equirectangular()
                     .scale(100)
                     .translate([width / 2, height / 2]);

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

var map = d3.select('#map')
          .attr('width', width)
          .attr('height', height)
          .classed('worldmap', true);

var originalScale=projection.scale();

var countries = {};
d3.json("Scripts/worldMapCountriesTopo.js", function (error, world) {
    countries = topojson.feature(world, world.objects.countries).features;
    var bounds = d3.geo.bounds(topojson.feature(world, world.objects.countries));
    var g = map.append('g');
    g.selectAll('path')
        .data(countries)
        .enter()
            .append('path')
            .attr('class', function (d) {
                return 'country' + ' ' + d.properties.name.split(' ').join('-');
            })
            .attr('d', defaultPath)
            .attr('stroke-width', '0.2em');

    var scale = projection.scale();
    var hscale = scale * width / (bounds[1][0] - bounds[0][0]);
    var vscale = scale * height / (bounds[1][1] - bounds[0][1]);
    scale = (hscale < vscale) ? hscale : vscale;
    var offset = [width - (bounds[0][0] + bounds[1][0]) / 2,
                    height - (bounds[0][1] + bounds[1][1]) / 2];

    var newProjection = projection.scale(scale).translate(offset);

    defaultPath.projection(newProjection);
    originalScale= projection.scale();
});

我从 center a map in d3 获取了引用它工作正常，但现在给定多个国家/地区，我希望获得中心和缩放。我尝试采用所选国家/地区的 d3.geo.bounds，然后计算比例因子，这里是代码片段

var boundingBoxes = [];
for (var i = 0; i < countries.length; i++) {
    for (var j = 0; j < selectedCountries.length; j++) {
        if (d3.select(selectedCountries[j].name.toUpperCase() == countries[i].properties.name.toUpperCase()) {
            boundingBoxes.push(defaultPath.bounds(countries[i]));
        }
    }
}
var left = [], bottom = [], right = [], top = [];
for (var i = 0; i < boundingBoxes.length; i++) {
    left.push(boundingBoxes[i][0][0]);
    bottom.push(boundingBoxes[i][0][1]);
    right.push(boundingBoxes[i][1][0]);
    top.push(boundingBoxes[i][1][1]);
}
var maxBottom=d3.max(bottom, function (d) { return d; });
var maxRight=d3.max(right, function (d) { return d; })
var minLeft=d3.min(left, function (d) { return d; })
var minTop = d3.min(top, function (d) { return d; })

var widthToZoom = maxRight - minLeft;
var heightToZoom = maxBottom - minTop;

var zoomHScale = (originalScale * widthToZoom) / width;
var zoomVScale = (originalScale * heightToZoom) / height;
var zoomScale =(zoomHScale < zoomVScale) ? zoomVScale : zoomHScale; 

这里我得到了负的 heightToZoom。我做对了吗？还有其他方法吗？

Answer 1

您需要弄清楚 y 轴数据的坐标系是哪个方向。

如果它是向下的，那么你的代码对我来说似乎很好。

如果它向上，那么您需要更改这些行:

var maxBottom=d3.max(bottom, function (d) { return d; });
var minTop = d3.min(top, function (d) { return d; })
...
var heightToZoom = maxBottom - minTop;

到这些行:

var maxTop=d3.max(top, function (d) { return d; });
var minBottom=d3.min(bottom, function (d) { return d; })
...
var heightToZoom = maxTop - minBottom;

我不能保证这是解决方案，因为我看不到你的文件，但它绝对值得检查。