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>