Я пытаюсь научиться использовать topoJSON.
Когда я использую код из этого примера https://bl.ocks.org/mbostock/4090870, он работает нормально.
Но затем я попытался использовать это руководство https://www.youtube.com/watch?v=aNbgrqRuoiE и для некоторых найденных файлов json я смог заставить его работать должным образом.Но когда я пытаюсь использовать файл json из первого примера (https://d3js.org/us-10m.v1.json) по какой-то причине SVG выходит зашифрованным (как вы можете видеть здесь https://jsfiddle.net/1dahx8jg/) Я не знаю, что я делаюНеправильно. Может ли кто-нибудь указать мне правильное направление?
Код из jsfiddle:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
* {
font-family: "Helvetica Neue";
}
p {
font-size: 0.85em;
}
svg {
background: #efefef;
}
.region {
fill: #cccccc;
stroke:#333333;
stroke-width: 0.5;
}
.selected {
fill: yellow;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
(function () {
var margin = { top: 50, left: 50, right: 50, bottom: 50 },
height = 400 - margin.top - margin.bottom,
width = 800 - margin.left - margin.right;
var svg = d3.select("#map")
.append("svg")
.attr("height", height + margin.top + margin.bottom)
.attr("width", width + margin.left + margin.right)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.queue()
.defer(d3.json, "https://d3js.org/us-10m.v1.json")
.await(ready);
function ready(error, data) {
console.log(data)
var projection = d3.geoMercator()
.translate([width / 2, height / 2])
.scale(100)
var path = d3.geoPath()
.projection(projection);
var regions = topojson.feature(data, data.objects.counties).features;
svg.selectAll(".region")
.data(regions)
.enter().append("path")
.attr("class", "region")
.attr("d", path )
}
})();
</script>
</body>
</html>