1
d3.js에서 내지도를 가운데 놓으려고합니다. 나는이 코드를 발견하고 조금 변경했다. 나는 그것을 할 수 없었다. 이 오류가 발생합니다. 어떻게 해결할 수 있습니까? 나는 자바 스크립트가 처음이다.오류 : <path> 속성 d : 예상 번호 "MNaN, NaNLNaN, NaNL ...". d3.js에서
이것은 내 코드입니다.
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Set a style for our worldshape-data -->
<style>
path {
stroke: red;
stroke-width: 0.5px;
fill: steelblue;
}
</style>
<body>
<!-- implementation of the hosted D3- and TopoJson js-libraries -->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v0.min.js"></script>
<!-- map creation -->
<script>
// canvas resolution
var width = 1000,
height = 600;
// defines "svg" as data type and "make canvas" command
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// shorten the svg.append command
var g = svg.append("g");
// load data and display the map on the canvas with country geometries
d3.json("turkey.json", function(error, topology) {
var projection = d3.geo.mercator().scale(1).translate([0, 0]).precision(0);
var path = d3.geo.path().projection(projection);
var bounds = path.bounds(topology);
var scale = .95/Math.max((bounds[1][0] - bounds[0][0])/width,
(bounds[1][1] - bounds[0][1])/height);
var transl = [(width - scale * (bounds[1][0] + bounds[0][0]))/2,
(height - scale * (bounds[1][1] + bounds[0][1]))/2
];
projection.scale(scale).translate(transl);
g.selectAll("path")
.data(topojson.object(topology, topology.objects.turkeytopo)
.geometries)
.enter()
.append("path")
.attr("d", path)
});
// zoom and pan functionality
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>
그리고 내 json 국가 데이터의 일부입니다.
{
"type": "Topology",
"objects": {
"turkeytopo": {
"type": "GeometryCollection",
"bbox": [25.66652800000014,
35.820178,
44.83384,
42.106301
],
"geometries": [{
"type": "MultiPolygon",
"arcs": [
[
[0]
],
[
[1]
],
[
[2]
],
[
[3]
],
[
[4]
],
[
[5]
],
[
[6]
],
[
[7]
],
[
[8]
],
[
[9]
],
[
[10]
],
[
[11]
]
]
}]
}
},
"arcs": [
[
[1726,
8274
],
[2, -33],
[-22,
0
],
[-7, -21],
[-43, -47],
[-16, -4],
[-12,
25
],
[-17,
13
],
[-36, -25],
[-33, -6],
[-11,
13
],
[-1,
66
],
[-17,
14
],
[-12, -52],
[-58,
81
],
[-28,
24
],
[-62,
16
],
[-14,
19
]
]
],
"transform": {
"scale": [0.001916922892289215,
0.000628675167516752
],
"translate": [25.66652800000014,
35.820178
]
}
}