在地图d3.js的连接点之间绘制圆弧

Question

我对d3.js完全陌生，很想学习。我正在尝试在地图上的连接点之间绘制圆弧。

我正在使用link中的一个很好的示例。这是我尝试进行更改并为plnkr添加圆弧以连接点的代码。

我看到了关于stackoverflow的评论，我确实知道如何应用方法：

Drawing Connecting Lines ("Great Arcs") on a D3 Symbol Map

如果在下面使用此代码，结果将是所有连接线在一起：

                var pathLine = d3.line()
            //      .curve(d3.curveCatmullRom.alpha(0))
            //      .curve(d3.curveCardinal.tension(0))
                    .curve(d3.curveLinear)
                    .x(function(d) { return projection([d["longitude"],d["latitude"]])[0];})
                    .y(function(d) { return projection([d["longitude"],d["latitude"]])[1];})           

                var Pathnew = d3.select('#map').append("path")
                .attr("d",pathLine(data[4]))
                .attr("class","bubble")
                .on("mouseover", function(d,i) { d3.select(this).transition().duration(1500).style("stroke-width", 2).style("stroke-opacity", .4).style('stroke', 'green'); })
                .on("mouseout", function(d,i) { d3.select(this).transition().duration(1500).style("stroke-width", 2).style("stroke-opacity", .4).style('stroke', 'red');    })  
                ;              

我正在尝试使用类似的代码：

                    d3.csv("flights.csv", function(flights) {
                  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;
                  });

还有这个：

var arc = d3.geo.greatArc();

                    d3.csv("searches.csv", function(error, csv) {
                  csv.forEach(function(d, i) {
                    var orgGeo = airportMap[d.origin];
                    var dstGeo = airportMap[d.destination];

                    if (orgGeo && dstGeo) {
                      var data = {source: orgGeo, target: dstGeo};
                      var trans = svg.append("path")
                                     .attr("d", function(d) { return path(arc(data)); })
                                     .attr("fill", "none")
                                     .attr("stroke", d3.rgb(255, 255, 255))
                                     .attr("stroke-width", 0.4)
                                     .attr("stroke-opacity", 1e-6)
                                     .transition()
                                     .delay(i * 5)
                                     .duration(300)
                                     .ease(Math.sqrt)
                                     .attr("stroke-opacity", 0.7)
                                     .transition()
                                     .duration(Math.min(+d.search_count * 1000, 5000))
                                     .ease(Math.sqrt)
                                     .attr("stroke-opacity", 1e-6)
                                     .remove();
                    }
                  });