我完全是 D3.js n00b,所以如果这最终有一个我完全错过的超级简单的解决方案,我深表歉意。无论如何,我正在尝试在世界地图上创建一个气泡图。它将类似于符号地图,但使用 d3.geo.mercator 而不是 d3.geo.albersUsa。我正在使用 world-countries.json 文件并创建了自己的 world-country-centroids.json 文件。有任何想法吗?这是代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Countries of the World</title>
<script type="text/javascript" src="../../d3.v2.js"></script>
<style type="text/css">
svg {
width: 960px;
height: 500px;
}
#countries path, #country-centroids circle {
fill: #ccc;
stroke: #fff;
stroke-width: 1.5px;
}
#country-centroids circle {
fill: steelblue;
fill-opacity: .8;
}
</style>
</head>
<body>
<script type="text/javascript">
// The radius scale for the centroids
var r = d3.scale.sqrt()
.domain([0, 1e6])
.range([0, 10]);
// World Map Projection
var xy = d3.geo.mercator(),
path = d3.geo.path().projection(xy);
var svg = d3.select("body").append("svg");
svg.append("g").attr("id", "countries");
svg.append("g").attr("id", "country-centroids");
d3.json("../data/world-countries.json", function(collection) {
svg.select("#countries")
.selectAll("path")
.data(collection.features)
.enter().append("path")
.attr("d", d3.geo.path().projection(xy));
});
d3.json("../data/world-country-centroids.json", function(collection) {
svg.select("#country-centroids")
.selectAll("circle")
.data(collection.features
.sort(function(a, b) { return b.properties.population - a.properties.population; }))
.enter().append("circle")
.attr("transform", function(d) { return "translate(" + xy(d.geometry.coordinates) + ")"; })
.attr("r", 0)
.transition()
.duration(1000)
.delay(function(d, i) { return i * 50; })
.attr("r", function(d) { return r(d.properties.population); });
});
</script>
</body>
</html>