3

world-50m.json ファイルを使用して d3 でマップを表示するチュートリアルを行いました。ただし、独自のjsonファイルを使用したいと考えています。これは私の .json ファイルの構造です。

"type": "FeatureCollection","features": [{ "type": "Feature","properties": { "FID": 0.000000 }, "geometry": { "type":"MultiPolygon", "座標" :[[[[141.415967, -15.837696 ]....そして座標が続きます。

ただし、コード内の呼び出しは古い world-50m.json に対するものであり、はい、現時点ではコードが world-50m.json を参照していることに気付きました。それを自分のファイルに変更します。

data(topojson.feature(トポロジー、トポロジー.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