2
我正在生成澳大利亞的TopoJSON圖表。我已成功生成了澳大利亞的GeoJSON地圖。然後我將該數據轉換爲TopoJSON,但無法呈現地圖。澳大利亞D3JS TopoJSON地圖:投影準確但沒有國家提供
注意事項:
- 我可以準確地預測城市的緯度/長點(即,它們的空間 關係看起來是正確的)。因此,我相信投影是好的。
- 沒有路徑生成,頁面空白。但與成功的在線教程相比,數據文件看起來是正確的。不知道爲什麼會這樣。
我創建了一個的jsfiddle這裏:https://jsfiddle.net/6j8sz21L/
謝謝!
下面是引用D3JS碼(也見的jsfiddle更多細節):
<!DOCTYPE html>
<html>
<head>
<title>Australia</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v2.min.js"></script>
<style type="text/css">
.pin {
border: 1px solid white;
}
svg {
background: lightblue;
}
</style>
</head>
<body>
<script type="text/javascript">
var width = 960,
height = 700;
var projection = d3.geo.mercator()
.center([131,25])
.scale(900)
.translate([400,-500]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var places = [{ name: "Adelaide", location: { latitude: -34.93, longitude: 138.6 }, position: { dy: ".35em", dx: "-4.75em" } }, { name: "Brisbane", location: { latitude: -27.47, longitude: 153.02 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Canberra", location: { latitude: -35.3, longitude: 149.13 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Darwin", location: { latitude: -12.45, longitude: 130.83 }, position: { dy: ".35em", dx: "-4em" } }, { name: "Hobart", location: { latitude: -42.88, longitude: 147.32 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Melbourne", location: { latitude: -37.82, longitude: 144.97 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Perth", location: { latitude: -31.95, longitude: 115.85 }, position: { dy: ".35em", dx: "-3.25em" } }, { name: "Sydney", location: { latitude: -33.87, longitude: 151.2 }, position: { dy: ".35em", dx: ".75em" } }];
//Probably best practice to reverse these calls
d3.csv("/Australia/Data/ABS_Pop_15.csv", function(data) {
//Set up fill colours
var minimum = d3.min(data, function(d) { return d.Value; }),
maximum = d3.max(data, function(d) { return d.Value; });
var minimumColor = "#e5f5f9",
maximumColor = "#99d8c9";
var color = d3.scale
.linear()
.domain([minimum, maximum])
.range([minimumColor, maximumColor]);
//Clean data
var ValueById = {};
data.forEach(function(d) {
ValueById[d.id] = +d.Value;
});
d3.json("/Australia/Data/australia_adm4_topo_id.json", function(sa2) {
svg.append("path")
.data(topojson.feature(sa2, sa2.objects.australia_adm4.geometries))
.enter().append("path")
.attr("d", path);
console.log(sa2);
svg.selectAll(".label")
.data(places)
.enter().append("text", ".label")
.attr("transform", function(d) {
return "translate(" + projection([d.location.longitude, d.location.latitude]) + ")";
})
.style("font-family", "Arial, sans-serif")
.style("font-size", "12px")
.style("font-weight", "bold")
.style("stroke-width", "0px")
.style("stroke", "#fff")
.attr("dy", function(d) { return d.position.dy; })
.attr("dx", function(d) { return d.position.dx; })
.text(function(d) { return d.name; });
});
});
</script>
非常感謝羅賓!我特別感謝你幫助我理解如何正確構建我的代碼。 –