Center a map in d3 given a geoJSON object

后端 未结 11 2218
慢半拍i
慢半拍i 2020-11-21 22:55

Currently in d3 if you have a geoJSON object that you are going to draw you have to scale it and translate it in order to get it to the size that one wants and translate it

11条回答
  •  死守一世寂寞
    2020-11-21 23:13

    How I centered a Topojson, where I needed to pull out the feature:

          var projection = d3.geo.albersUsa();
    
          var path = d3.geo.path()
            .projection(projection);
    
    
          var tracts = topojson.feature(mapdata, mapdata.objects.tx_counties);
    
          projection
              .scale(1)
              .translate([0, 0]);
    
          var b = path.bounds(tracts),
              s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
              t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
    
          projection
              .scale(s)
              .translate(t);
    
            svg.append("path")
                .datum(topojson.feature(mapdata, mapdata.objects.tx_counties))
                .attr("d", path)
    

提交回复
热议问题