Bangalore geojson map with d3 js

Am trying to use a Bangalore geojson file with 8 zones (features) in it by using d3.js

The map is not showing up properly. What's wrong here. ??

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: expr maps</title>
        <script type="text/javascript" src="d3/d3.min.js"></script>
        <style type="text/css">
            /* No style rules here yet */       
        </style>
    </head>
    <body>
        <script type="text/javascript">

            //Width and height
            var width = 500;
            var height = 300;

  var vis = d3.select("body").append("svg")
      .attr("width", width).attr("height", height);
      
  d3.json("BangZone.json", function(json) {
                
       // Create a unit projection.
      var projection = d3.geo.mercator()
          .scale(1)
          .translate([0, 0]);

      // Create a path generator.
      var path = d3.geo.path()
          .projection(projection);

      // Compute the bounds of a feature of interest, then derive scale & translate.
      var b = path.bounds(json),
          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];

      // Update the projection to use computed scale & translate.
      projection
          .scale(s)
          .translate(t);
          
      
      path = path.projection(projection);
  
      // add a rectangle to see the bound of the svg
      vis.append("rect").attr('width', width).attr('height', height)
        .style('stroke', 'black').style('fill', 'none');

      vis.selectAll("path").data(json.features).enter().append("path")
        .attr("d", path)
        .style("fill", "red")
        .style("stroke-width", "1")
        .style("stroke", "black")

  });  
     
        </script>
    </body>
</html>

And the geojson file is : BangaloreGeojsonwithZones

Is the problem in geojson file or in the d3 code??

seb

Your GeoJSON file uses EPSG::37001. Try converting it to EPSG:4326 and see if that helps. You can convert it with QGIS.

I've had a similar problem, the solution is here: d3-javascript-and-geojson-lines-in-stockholm-map-very-strange.

来源：https://stackoverflow.com/questions/33800651/bangalore-geojson-map-with-d3-js

标签

javascript