在 D3 Javascript 中显示 .json 地图答案

【问题标题】：Displaying .json map in D3 Javascript在 D3 Javascript 中显示 .json 地图
【发布时间】：2013-07-03 00:22:19
【问题描述】：

我做了一个关于在 d3 中使用 world-50m.json 文件显示地图的教程。但是我希望使用我自己的 json 文件。这是我的 .json 文件的结构。

"type": "FeatureCollection","features": [{ "type": "Feature","properties": { "FID": 0.000000 }, "geometry": { "type":"MultiPolygon", “坐标”：[[[[141.415967，-15.837696]....坐标继续。

但是代码中的调用是针对旧 world-50m.json 的，是的，我确实意识到目前代码正在引用 world-50m.json，我会将其更改为我的文件：

数据（topojson.feature（拓扑，topology.objects.countries）

我的问题是我对新的 .json 文件使用什么调用。我尝试了很多组合，但不断收到错误 topology.objects is undefined。任何帮助表示赞赏。

代码如下：

<!DOCTYPE html>
<meta charset="utf-8">
<style>



path {
    stroke: white;
    stroke-width: 0.25px;
    fill: grey;
}


</style>
<body>
<script type="text/javascript" src="d3/d3.v3.min.js"></script>
<script src="js/topojson/topojson.js"></script>
<script>


var width = 960,
    height = 500;

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

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

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

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

// load and display the World
d3.json("json/world-50m.json", function(error, topology) {
    g.selectAll("path")
        .data(topojson.feature(topology, topology.objects.countries)
            .features)
    .enter()
        .append("path")
        .attr("d", path)

    d3.csv("data/CairnsPort2012.csv", function(error, data) {
        g.selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
            .attr("cx", function(d) {
                return projection([d.LONG, d.LAT])[0];
            })
            .attr("cy", function(d) {
                return projection([d.LONG, d.LAT])[1];
            })
            .attr("r", 0.1)
            .style("fill", "red");
    }); 

});

var zoom = d3.behavior.zoom()
    .on("zoom",function() {
        g.attr("transform","translate("+
            d3.event.translate.join(",")+")scale("+d3.event.scale+")");
        g.selectAll("path")
            .attr("d", path.projection(projection));
});

svg.call(zoom)


</script>
</body>
</html>

【问题讨论】：

标签： javascript json d3.js

【解决方案1】：

好的，首先我们需要整理一下你调用加载地图数据的顺序。

我们需要像这样将错误调用放在第二个。

d3.json("json/world-50m.json", function(topology, error) {

那我觉得你需要改一下；

g.selectAll("path")
    .data(topojson.feature(topology, topology.objects.countries)
        .features)

...到...

g.selectAll("path")
      .data(topology.features)

我说这可能基于我这里有一个非常相似的 json 布局的工作地图来工作

{"type":"FeatureCollection",
  "features":[
    {
    "type":"Feature",
    "properties":{"name":"New Zealand","iso_a2":"NZ","iso_a3":"NZL","iso_n3":"554"},
    "geometry":{"type":"MultiPolygon","coordinates":[ [ [ [ 167.44947350400005, -47.23943450299987 ], ....and the coordinates go on ] ] ] ]}}
  ]
}

...和下面的代码。

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

d3.json("json/nz-10m2.json", function (topology, error) {
  g.selectAll("path")
      .data(topology.features)
      .enter()
      .append("path")
      .attr("d", path);
});

【讨论】：

好的，所以我做了修复，如上面的 cmets。首先，我遇到了错误类型错误：拓扑为空。我虽然这可能是因为错误和拓扑被切换了，所以我尝试了函数（错误，拓扑）并且我在控制台中不再有任何错误，但是我的地图没有显示，我只是面对一个空白页。有什么想法吗？
更新：它似乎适用于函数（错误，拓扑）。不知道为什么，也许你比我知道的更多。但是没有显示地图（它正在获取地图）。使用 ogr2ogr 从 .shp 创建了一个新地图。它工作得很好。感谢 d3noob 的帮助。我在很短的时间内学到了很多东西，感激不尽。
好消息。关于错误和拓扑交换的有趣。我这里有一个版本，需要相反的方式。奇怪的。做得很好。
我正在使用 d3.v3.min.js，你在使用什么，我在想它可能与 d3 的特定版本有关，我知道 d3.v3 与 d3 不同。 v3.分钟。但是，是的，绝对是那些使拓扑无效的顺序。
你是正确的。我实际上是在使用 d3.v2 作为图表。当我更改为 d3.v3 时，它抛出了一个错误（无论放置拓扑和错误的方式如何），当我更改为 d3.v3.min 时，我必须有顺序错误，拓扑！完全不知道该怎么做。我怀疑这可能与我的 geojson 文件有关，但我没有精力去追它。