3

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

"type": "FeatureCollection","features": [{ "type": "Feature","properties": { "FID": 0.000000 }, "geometry": { "type":"MultiPolygon", "coordinates" :[[[[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>
4

1 回答 1

3

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

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

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);
});
于 2013-07-05T04:12:49.557 回答