我是 d3.js 的新手，正在尝试一些简单的事情。我绘制了一张读取 file1 和 file2 的世界地图。 file2 按索引 ID、纬度和经度列出机场。 file1 通过机场的索引 ID 来对机场进行配对。我想画一条弧线、一条线或任何东西来连接它们。我们的想法是制作这样的东西：http://mbostock.github.io/d3/talk/20111116/airports.html使用不同的数据集
但这个例子太难遵循了。
下面的代码正确地绘制了地图并绘制了机场的圆圈，但如何连接它们还有待观察。
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<script src="js/topojson.v0.min.js"></script>
<script>
var width = 2000, height = 2000;
var projection = d3.geo.mercator().center([0, 5]).scale(100).rotate([0, 0]);
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
var path = d3.geo.path().projection(projection);
var g = svg.append("g");
d3.json("json/world-110m2.json", function(error, topology) {// load and display the World
g.selectAll("path").data(topojson.object(topology, topology.objects.countries).geometries).enter().append("path").attr("d", path)
});
d3.csv("file1", function(flights) { //Attempt to draw arcs
var linksByOrigin = {}, countByAirport = {}, locationByAirport = {}, positions = [];
var arc = d3.geo.greatArc().source(function(d) {
return locationByAirport[d.source];
}).target(function(d) {
return locationByAirport[d.target];
});
flights.forEach(function(flight) {
var origin = flight.origin, destination = flight.destination, links = linksByOrigin[origin] || (linksByOrigin[origin] = []);
links.push({
source : origin,
target : destination
});
countByAirport[origin] = (countByAirport[origin] || 0) + 1;
countByAirport[destination] = (countByAirport[destination] || 0) + 1;
});
d3.csv("file2", function(error, data) {// read in and plot the circles
g.selectAll(".blue.circle").data(data).enter().append("circle").attr("class", "blue circle").attr("cx", function(d) {
return projection([d.lon, d.lat])[0];
}).attr("cy", function(d) {
return projection([d.lon, d.lat])[1];
});
g.selectAll("path.arc").data(function(d) {
return linksByOrigin[data.ctuid] || [];
}).enter().append("svg:path").attr("class", "arc").attr("d", function(d) {
return path(arc(d));
});
});
});
</script>
</body>
</html>
我对此很陌生，因此代码可能很草率，但任何有关从 CSV 中提取的连接点的提示将不胜感激。谢谢你！
