首页 \ 问答 \ d3.js：从文件的地图上的两点之间绘制弧线(d3.js: Drawing arcs between two points on map from file)

d3.js：从文件的地图上的两点之间绘制弧线(d3.js: Drawing arcs between two points on map from file)

 我是d3.js的新手，我正在尝试一些简单的方法。 我绘制了一个读取file1和file2的世界地图。 file2按indexID，lat和lon列出机场。 file1通过它们的indexID配对机场。 我想绘制一条弧线，一条线或任何连接它们的东西。 这个想法是产生这样的东西： 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>
 
 我对此很陌生，所以代码可能很sl，，但是关于从CSV中提取连接点的任何提示都将不胜感激。 谢谢！ 

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>
 
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!

原文：https://stackoverflow.com/questions/17156283

更新时间：2022-05-31 09:05

最满意答案

 我希望以下答案能帮到你。  
function searchPos(){
if ($(window).width() < 461) {
      $(".wrap1 .login, .wrap2 .search").prependTo($(".wrap3"));
    } else {
      $(".wrap3 .login").appendTo(".wrap1");
      $(".wrap3 .search").appendTo(".wrap2");
    }
}
searchPos();    
$(window).resize(function(){
    searchPos();    
});
 
 见演示 

Found it! 
@nnnnnn was actually right: 
There were multiple wraps. My JS is actually $(".login").appendTo(".wrap1 .centerwrap") 
(it's still called wrap1 for comprehension) 
So there wouldn't be any problems, but I forgot that there were multiple nested (bc of pos:abs navigation) centerwraps in .wrap2. That's why the .wrap1 .login worked perfectly but the .wrap2 .search didn't. 
Solved it with 
$(".login").appendTo(".wrap1 > .centerwrap");
$(".search").appendTo(".wrap2 > .centerwrap");
 
And yes, I feel dumb. Have been looking for the answer for 2 days now.

d3.js：从文件的地图上的两点之间绘制弧线(d3.js: Drawing arcs between two points on map from file)

最满意答案

相关问答

Jquery appendTo()函数[2022-01-31]

jQuery - appendTo（）的问题(jQuery - issue with appendTo())[2024-01-19]

jQuery appendTo（）(jQuery appendTo() )[2024-02-05]

jQuery UI对话appendTo问题(jQuery UI Dialog appendTo issue)[2019-12-12]

jquery appendTo html订购问题(jquery appendTo html ordering issue)[2022-12-08]

html使用jquery问题选择appendto(html select appendto using jquery issue)[2023-12-01]

Jquery appendTo多次复制内容(Jquery appendTo Duplicating content multiple times)[2021-12-21]

动态jQuery AppendTo选择器(Dynamic jQuery AppendTo Selector)[2022-04-09]

Jquery AppendTo bug(Jquery AppendTo bug)[2022-10-28]

JQuery：AppendTo按顺序？(JQuery: AppendTo in order?)[2021-08-29]

相关文章

最新问答