Databases
StackOverflow2013
Postsdbo
POzoom and center for multiple countries using d3
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POzoom and center for multiple countries using d3
    text
    copied!<pre><code>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 &lt; 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(); }); </code></pre> <p>I took the ref from <a href="https://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object">center a map in d3</a> 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</p> <pre><code>var boundingBoxes = []; for (var i = 0; i &lt; countries.length; i++) { for (var j = 0; j &lt; 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 &lt; 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 &lt; zoomVScale) ? zoomVScale : zoomHScale; </code></pre> <p>Here I am getting the negative heightToZoom. Am I doing it right? Is there any other way to do it ?</p> <p><img src="https://i.stack.imgur.com/G4W4X.jpg" alt="center of the three countries and scale"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload