1
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

Community
  • 1
  • 1
Raju
  • 109
  • 13
  • 1
    The easiest way to do this would be to treat the two countries as a single GeoJSON feature. – Lars Kotthoff Dec 28 '13 at 22:40
  • @LarsKotthoff thanks that saved my couple of lines but scaling and translate is not as expected with the above logic seems i need to figure out some other way – Raju Dec 31 '13 at 11:29
  • If you treat them as a single feature, the solution in the question you've linked to should work without any modifications. – Lars Kotthoff Dec 31 '13 at 14:44
  • @LarsKotthoff yes you are right using the same now but I am sort of trying to [achieve this](http://stackoverflow.com/questions/13802218/how-to-accurately-zoom-d3-maps-which-have-already-been-translated) – Raju Dec 31 '13 at 21:23
  • It's going to be much easier to have just a single translation for everything. – Lars Kotthoff Dec 31 '13 at 21:26

2 Answers2

0

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.

VividD
  • 10,456
  • 6
  • 64
  • 111
  • Thanks,you are right,it's maxTop & minBottom.I missed very [important line from doc](https://github.com/mbostock/d3/wiki/Geo-Paths#wiki-bounds) which says bottom is the minimum latitude and top is the maximum latitude. But the calculated scale & translation doesn't show the desired output another thing i wish to achieve is [this](http://stackoverflow.com/questions/13802218/how-to-accurately-zoom-d3-maps-which-have-already-been-translated) – Raju Dec 31 '13 at 11:44
  • @b.raja, if this was the correct answer that helped you, could you perhaps mark it as the answer? :) – VividD Jan 03 '14 at 20:21
  • As far as question is concerned the logical part doesn't work for second selection because the [path has been already traversed](http://stackoverflow.com/questions/13802218/how-to-accurately-zoom-d3-maps-which-have-already-been-translated) as said i wish to achieve this as my end result but yes your clue was lot more helpful so +1 – Raju Jan 04 '14 at 19:58
0

I suggest using path.centroid instead of path.bounds, centroids are center of mass, in cases like Russia or USA you will see the diference

   var centroids = [];

    for(var i = 0; i < list.length; i++) {
      centroids.push(this.path.centroid(list[i]));
    }

    if(centroids.length > 1) {
      var bounds = {
        topLeft : d3.min(centroids, function(d) { return d[0];}),
        topRight : d3.max(centroids, function(d) { return d[0];}),
        bottomLeft : d3.min(centroids, function(d) { return d[1];}),
        bottomRight : d3.max(centroids, function(d) { return d[1];}),
      };

      console.log('centroids ',centroids);


      var dx = bounds.topRight - bounds.topLeft,
          dy = bounds.bottomRight - bounds.bottomLeft,
          x = (bounds.topRight + bounds.topLeft) / 2,
          y = (bounds.bottomLeft + bounds.bottomRight ) / 2;

      console.log('calculated bounds ',dx,dy,x,y);

      scale = Math.floor(.9 / Math.max(dx / this.properties.width, dy / this.properties.height)),
      scale = scale < 1 ? 1 : scale;
      scale = scale > 10 ? 10 : scale;
      translate = [this.properties.width / 2 - scale * x, this.properties.height / 2 - scale * y];


    } else {

      var bounds = map.path.bounds(this._.selectedList[0]);
      var dx = bounds[1][0] - bounds[0][0],
          dy = bounds[1][1] - bounds[0][1];

      var max = Math.max((dx  / this.properties.width), (dy / this.properties.height));

      scale = Math.floor(1 / max);
      scale = scale < 1 ? 1 : scale;
      scale = scale > 10 ? 10 : scale;
      translate = [this.properties.width / 2 - scale * centroids[0][0],  this.properties.height / 2 - scale * centroids[0][1]];
    }
Yohendry
  • 1
  • 1