使用 d3 js 的班加罗尔 geojson 地图答案

【问题标题】：Bangalore geojson map with d3 js使用 d3 js 的班加罗尔 geojson 地图
【发布时间】：2015-11-19 10:03:28
【问题描述】：

我正在尝试通过使用 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代码的问题？？

【问题讨论】：

似乎这只是一个居中和放大地图的问题。将stroke-width 更改为.style("stroke-width", "10")，您将看到地图的Bangalore 部分已加载并显示。矩形代表世界。如果您将mercator 更改为var projection = d3.geo.albers()，则世界将显示为一个圆圈，班加罗尔将是其上的一个小点。时间有点紧迫，所以暂时无法提供更多帮助。

标签： javascript d3.js svg geojson geomap

【解决方案1】：

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

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

【讨论】：

嘿 Seb，即使将其更改为 EPSG:4326 后，它也无法正常工作。结果相同。
你能推荐一些其他的解决方案吗？请