d3.js：在地图上从文件中的两点之间绘制圆弧 [英] d3.js: Drawing arcs between two points on map from file
问题描述
我是d3j的新手，正在尝试一些简单的东西。我画了一个世界地图，读入file1和file2。 file2按照indexID，lat和lon列出机场。 file1通过它们的indexID对机场。我想画一个弧线，线或任何东西来连接它们。这个想法是产生这样的东西： http://mbostock.github.io/ d3 / talk / 20111116 / airports.html 使用不同的数据集
，但此示例太难以跟踪。
I am new to d3.js and am trying something simple. I have drawn a world map that reads in file1 and file2. file2 lists airports by an indexID, lat, and lon. file1 pairs the airports by their indexID. I want to draw an arc, line, or anything to connect them. The idea was to produce something like this: http://mbostock.github.io/d3/talk/20111116/airports.html with a different data set but this example was too hard to follow.
以下代码正确绘制地图和绘制机场的圈子，但仍然被看到如何连接他们。
The code below correctly draws the map and plots circles for the airports, but remains to be seen how to connect them.
<!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将非常感谢。谢谢！
I am new to this so the code may be sloppy, but any hints about connecting points pulled from a CSV would be greatly appreciated. Thank you!
推荐答案
在点之间绘制弧线为什么不使用弧线指令的路径（A）。我也试过greatArc，但没有工作。但是从此讨论和alternate如下：
To draw an arc between points why not use a path with arc directive(A). I too tried greatArc, but din't work. But found an alternate from this discussion and the alternate is given below:
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;
});
替换 path（arc（d））与上述代码段，并根据您的值替换x和y值。这对我来说很有魅力。希望这有帮助。
Replace path(arc(d)) with the above snippet and replace the x and y values according to your values. This worked like charm for me. Hope this helps.
这篇关于d3.js：在地图上从文件中的两点之间绘制圆弧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
