javascript - 带有 d3 js 的类加罗尔 geojson map-6ren

javascript - 带有 d3 js 的类加罗尔 geojson map

转载作者：行者123 更新时间：2023-11-30 00:19:11

25

4

我正在尝试通过 d3.js 使用带有 8 个区域(特征)的类加罗尔 geojson 文件

map 显示不正确。这里有什么问题。？？

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