Map不使用d3.js加载

Map NOT loading using d3.js?

本文关键字：js 加载 d3 Map      更新时间：2023-09-26

这是我第一次尝试使用d3制作web地图，尽管我复制了相同的源代码，但我遇到了奇怪的问题。然而，地图不会加载，我不知道是否从数据的问题或有一些错误的代码。希望有人能弄明白!!

这是代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    </head>
    <body>
        <script type="text/javascript">
            d3.select("body").append("p").text("new paragraph!");
            var svg = d3.select("body").append("svg")
                .attr("width", 960)
                .attr("height",1160)
            d3.json("usa.geojson", function (data) {
                var group = svg.selectAll("g")
                    .data(data.features)
                    .enter()
                    .append("g")
                var projection = d3.geo.mercator();
                var path = d3.geo.path().projection(projection);
                var areas = group.append("path")
                    .attr("d",path)
                    .attr("class", "area")
                    .attr("fill", "steelblue") 
            });
        </script>
    </body>

geojson文件:

{
"type": "FeatureCollection",
"features": [
{ "type": "Feature",
"properties": { "GEO_ID": "0400000US23", "STATE": "23", "NAME": "Maine",
"LSAD": "", "CENSUSAREA": 30842.923000 }, 
"geometry": { "type": "MultiPolygon", "coordinates":

你的代码有两个问题:

  1. 你通过你的评论/dropbox提供的GeoJSON是畸形的。它在第44行被截断，表示亚利桑那州。

  2. 你可以改进JSON回调函数来正确处理错误。API文档中有d3.json():

    用两个参数调用回调:错误(如果有的话)和解析后的JSON

    你应该定义一个包含两个参数的回调

    d3.json("usa.geojson", function (error, data) {

我已经纠正了这些错误，并把一个工作的Plunk。请注意，在本例中只显示了少数几个状态，因为我必须削减usa.geojson文件以在plnkr.co上处理它。

相关文章：