d3.js：在地图上从文件中的两点之间绘制圆弧

问题描述：

我是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：在地图上从文件中的两点之间绘制圆弧

相关推荐