d3.js：从文件在地图上的两点之间绘制圆弧
我是d3.js新手，正在尝试一些简单的东西。我画了一张世界地图，上面写着file1和file2。文件2按indexID、lat和lon列出机场。文件1按索引对机场进行配对。我想画一条弧、线或任何东西来连接它们。这个想法是要产生这样的东西：使用不同的数据集 但这个例子太难遵循了 下面的代码正确地绘制了机场的地图并绘制了圆圈，但如何连接它们还有待观察d3.js：从文件在地图上的两点之间绘制圆弧,d3.js,D3.js,我是d3.js新手，正在尝试一些简单的东西。我画了一张世界地图，上面写着file1和file2。文件2按indexID、lat和lon列出机场。文件1按索引对机场进行配对。我想画一条弧、线或任何东西来连接它们。这个想法是要产生这样的东西：使用不同的数据集 但这个例子太难遵循了 下面的代码正确地绘制了机场的地图并绘制了圆圈，但如何连接它们还有待观察 <!DOCTYPE html> <meta charset="utf-8"> <body> <script
<!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>
可变宽度=2000，高度=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”），函数（错误，拓扑）{//加载并显示世界
g、 选择所有（“路径”）.data（topojson.object（topology，topology.objects.countries）.geometrics）。输入（）
});
d3.csv（“file1”，函数（flights）{//尝试绘制圆弧
var linksByOrigin={}，countByAirport={}，locationByAirport={}，positions=[]；
var arc=d3.geo.greatArc（）.source（函数（d）{
返回地点按机场[d.来源]；
}).目标（功能（d）{
按机场返回位置[d.目标]；
});
flights.forEach（功能（航班）{
var origin=flight.origin，destination=flight.destination，links=linksByOrigin[origin]| |（linksByOrigin[origin]=[]）；
links.push({
资料来源：来源：，
目标：目的地
});
countByAirport[原点]=（countByAirport[原点]| | 0）+1；
countByAirport[目的地]=（countByAirport[目的地]| | 0）+1；
});
d3.csv（“文件2”，函数（错误，数据）{//读入并绘制圆圈
g、 选择All（“.blue.circle”）.data（data）。enter（）。追加（“circle”）.attr（“class”，“blue circle”）.attr（“cx”，函数（d）{
返回投影（[d.lon，d.lat]）[0]；
}).attr（“cy”，函数（d）{
返回投影（[d.lon，d.lat]）[1]；
});
g、 选择全部（“path.arc”）。数据（功能（d）{
返回linksByOrigin[data.ctuid]| |[]；
}).enter（）.append（“svg:path”）.attr（“类”、“弧”）.attr（“d”，函数（d）{
返回路径（弧（d））；
});
});
});
我是新来的，所以代码可能是草率的，但任何关于从CSV中提取连接点的提示都将不胜感激。谢谢大家! 若要在点之间绘制圆弧，为什么不使用带有圆弧指令（a）的路径。我也试过greatArc，但没用。但从中找到了替代品，替代品如下所示：
path.attr("d", function(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr +
" 0 0,1 " + d.target.x + "," + d.target.y;
});
用上述代码段替换路径（圆弧（d）），并根据您的值替换x和y值。这对我很有吸引力。希望这有帮助。您的示例中有创建圆弧的代码。这不管用吗？它怎么不起作用？你收到错误信息了吗？显然有绘制圆弧的代码，但可能我把它放错了位置，因为结果只是一张世界地图和点，没有圆弧。没有错误消息，只是试图弄清楚我是否正确绘制了它们并将它们附加到地图上。谢谢您需要将实际数据传递到绘制圆弧的位，大概是
链接d3.csv