b.raja b.raja - 2 months ago 29
Javascript Question

zoom and center for multiple countries using d3

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();
});


I took the ref from center a map in d3
Its works fine but now given multiple countries, I wish to get the center and zoom.
I have tried taking the d3.geo.bounds for the selected countries and then calculating the scaling factor here is the snippet

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;


Here I am getting the negative heightToZoom. Am I doing it right? Is there any other way to do it ?

center of the three countries and scale

Answer

You need to figure out which direction is coordinate system of your data for y axis.

If it is downwards, than your code seems fine to me.

If it is upwards, than you need to change these lines:

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

to these lines:

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

I cant guarantee that this is solution, since I cant see your files, but its definitely worth checking.