2

我正在尝试通过使用 d3.js 来使用其中包含 8 个区域（功能）的班加罗尔 geojson 文件

地图没有正确显示。这里有什么问题。??

<!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>

geojson 文件是：BangaloreGeojsonwithZones

是geojson文件还是d3代码中的问题？

4

1 回答 1

1

您的 GeoJSON 文件使用 EPSG::37001。尝试将其转换为 EPSG:4326 看看是否有帮助。您可以使用QGIS转换它。

我遇到了类似的问题，解决方案在这里：d3-javascript-and-geojson-lines-in-stockholm-map-very-strange。

于 2015-11-20T09:22:31.790 回答