Question

这是我第一次尝试将d3用于网络地图，即使我真的复制了相同的源代码，我也遇到了奇怪的问题。但是，地图不会加载我不知道数据中的问题或代码中是否存在错误。希望有人能搞清楚!!

这是代码：

match_parent

geojson文件：

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

Answer 1

您的代码存在两个问题：

您通过评论/保管箱提供的GeoJSON格式不正确。它在亚利桑那州的44号线上被切断。
您可以改进JSON回调函数以正确处理错误。正如API文档在d3.json()上有它：

使用两个参数调用回调：错误（如果有）和解析的JSON

您应该定义一个包含两个参数的回调
```
d3.json("usa.geojson", function (error, data) {
```

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

地图不使用d3.js加载？

1 个答案: