Question

我正在尝试使用d3.js显示JSON映射，但浏览器上没有任何内容。

JSON文件包含以下内容：

{  
   "type":"FeatureCollection",
   "features":[  
      {  
         "type":"Feature",
         "id":"CYP",
         "properties":{  
            "name":"Cyprus"
         },
         "geometry":{  
            "type":"Polygon",
            "coordinates":[  
               [  
                  [  
                     33.973617,
                     35.058506
                  ],
                  [  
                     34.004881,
                     34.978098
                  ],
                  [  
                     32.979827,
                     34.571869
                  ],
                  [  
                     32.490296,
                     34.701655
                  ],
                  [  
                     32.256667,
                     35.103232
                  ],
                  [  
                     32.73178,
                     35.140026
                  ],
                  [  
                     32.919572,
                     35.087833
                  ],
                  [  
                     33.190977,
                     35.173125
                  ],
                  [  
                     33.383833,
                     35.162712
                  ],
                  [  
                     33.455922,
                     35.101424
                  ],
                  [  
                     33.475817,
                     35.000345
                  ],
                  [  
                     33.525685,
                     35.038688
                  ],
                  [  
                     33.675392,
                     35.017863
                  ],
                  [  
                     33.86644,
                     35.093595
                  ],
                  [  
                     33.973617,
                     35.058506
                  ]
               ]
            ]
         }
      }
   ]
}

我的html文件如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Map</title>
        <script src="https://d3js.org/d3.v5.min.js"></script>
    </head>

    <body>
        <script type="text/javascript">
            var width = 960,
                height = 500;

            var projection = d3.geoEquirectangular()
                .center([-30, -17 ])
                .scale(3000)
                .rotate([-180,0]);

            var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height);

            var path = d3.geoPath()
                .projection(projection);

            var g = svg.append("g");

            d3.json("https://raw.githubusercontent.com/johan/world.geo.json/master/countries/CYP.geo.json", function (topology, error) {
                g.selectAll("path")
                    .data(topology.features)
                    .enter()
                    .append("path")
                    .attr("d", path);
            });
        </script>
    </body>
</html>

有人认为我可能做错了吗？

Answer 1

您的比例尺和中心点似乎有问题。根据d3-geo API，有方法fitSize，可让您轻松地将其放置在容器内的投影上。

这是一个片段（其中的数据已硬编码在其中）：

var data ={  
   "type":"FeatureCollection",
   "features":[  
      {  
         "type":"Feature",
         "id":"CYP",
         "properties":{  
            "name":"Cyprus"
         },
         "geometry":{  
            "type":"Polygon",
            "coordinates":[  
               [  
                  [  
                     33.973617,
                     35.058506
                  ],
                  [  
                     34.004881,
                     34.978098
                  ],
                  [  
                     32.979827,
                     34.571869
                  ],
                  [  
                     32.490296,
                     34.701655
                  ],
                  [  
                     32.256667,
                     35.103232
                  ],
                  [  
                     32.73178,
                     35.140026
                  ],
                  [  
                     32.919572,
                     35.087833
                  ],
                  [  
                     33.190977,
                     35.173125
                  ],
                  [  
                     33.383833,
                     35.162712
                  ],
                  [  
                     33.455922,
                     35.101424
                  ],
                  [  
                     33.475817,
                     35.000345
                  ],
                  [  
                     33.525685,
                     35.038688
                  ],
                  [  
                     33.675392,
                     35.017863
                  ],
                  [  
                     33.86644,
                     35.093595
                  ],
                  [  
                     33.973617,
                     35.058506
                  ]
               ]
            ]
         }
      }
   ]
}

  
var width = 960,
height = 500;

var projection = d3.geoEquirectangular().fitSize([width, height], data); // adding fitSize method instead of center and scale.


var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var path = d3.geoPath()
    .projection(projection);

var g = svg.append("g");

    g.selectAll("path")
        .data(data.features)
        .enter()
        .append("path")
        .attr("d", path)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>

无法使用d3.js显示JSON映射

1 个答案: