我正在生成澳大利亚的TopoJSON制图。我已经成功生成了澳大利亚的GeoJSON地图。然后，我将该数据转换为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>
最佳答案
给您一个问题的代码行是：
svg.append("path")
.data(topojson.feature(sa2, sa2.objects.australia_adm4.geometries))
.enter().append("path")
.attr("d", path);
改用它（您可以将其直接复制到小提琴中的上方）：
svg.selectAll("path")
.data(topojson.feature(sa2, sa2.objects.australia_adm4).features)
.enter().append("path")
.attr("d", path);
我根据一个类似的模板做了一些重写，以显示其工作原理：
//map frame dimensions
var width = 960;
var height = 640;
//create a new svg element with the above dimensions
map = d3.select('#map')
.append('svg')
.attr('width', width)
.attr('height', height);
//create projection
var projection = d3.geo.mercator()
.center([0, -27])
.rotate([-140, 0])
.scale(Math.min(height * 1.2, width * 0.8))
.translate([width / 2, height / 2])
.precision(0.1);
//create svg path generator using the projection
var path = d3.geo.path()
.projection(projection);
// locations to render
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" } }];
// render map
var url = 'https://rawgit.com/DanielGalletta/Carto/master/Data/australia_adm4_topo_id.json';
d3.json(url, renderMap);
function renderMap(error, geoData) {
//add geometry to map
var mapAreas = map.selectAll('path')
.data(topojson.feature(geoData, geoData.objects.australia_adm4).features)
.enter() //create elements
.append('path') //append elements to svg
.attr('d', path) //project data as geometry in svg
// add locations to map
var cities = map.selectAll('.label')
.data(places)
.enter()
.append('text', '.label')
.attr('transform', function(d) {
return 'translate(' + projection([d.location.longitude, d.location.latitude]) + ')';
})
.attr('dy', function(d) { return d.position.dy; })
.attr('dx', function(d) { return d.position.dx; })
.text(function(d) { return d.name; })
};path {
stroke-width: 1px;
stroke: white;
fill: lightblue;
cursor: pointer;
}
path:hover,
path.highlighted {
fill: steelblue;
}
.label {
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
stroke-width: 0px;
stroke: #fff
}<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v2.min.js"></script>
<div id="map"></div>另外，这是关于
selectAll和append函数如何在元素上进行操作的useful blog article。关于javascript - 澳大利亚的D3JS TopoJSON map :投影准确但未呈现任何国家，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41325519/