Привет, я следил за примером того, как создать географическую карту с использованием D3 и файла Geo Json.
До сих пор с помощью этой книги я без проблем создал следующее: h**p://chimera.labs.oreilly.com/books/1230000000345/ch12.html#_projections
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 300;
//Define map projection
var projection = d3.geo.albersUsa()
.translate([w/2, h/2])
.scale([500]);
//Define path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in GeoJSON data
d3.json("us-states.json", function(json) {
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path);
});
</script>
</body>
using this json file: https://dl.dropboxusercontent.com/u/49159198/us-states.json
Когда я пытаюсь создать карту мира, используя следующий файл json (в том же формате, что и США, только страны, а не штаты), это не получается.
https://dl.dropboxusercontent.com/u/49159198/countries.geo.json
Карта США выглядит как черный прямоугольник. После применения некоторого штриха к пути в CSS я вижу, что карта есть, но это не сработает, так как мне нужно позже отредактировать путь с помощью данных из CSV.
Код для карты мира:
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 960;
var h = 480;
var projection = d3.geo.equirectangular()
.translate([w/2, h/2])
.scale([150]);
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in GeoJSON data
d3.json("countries.geo.json", function(json) {
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path);
});
</script>
</body>
Any help would be great as it will be aiding my college project.
Обновлено в связи с ответами ниже
