地圖上兩個投影點之間的繪製線 - 無線顯示 - D3.js

Question

我想在美國地圖上的兩個經緯度點之間劃一條線。我有指示出發地和目的地的圓圈，但是當我嘗試繪製線時什麼也沒有出現。沒有錯誤被拋出。

我能夠通過寫作手動繪製這些點之間的連線：

svg.selectAll("line") 
     .data(data) 
     .enter() 
     .append("line") 
     .attr("x1", projection(data[0])[0]) 
     .attr("y1", projection(data[0])[1]) 
     .attr("x2", projection(data[1])[0]) 
     .attr("y2", projection(data[1])[1]) 
     .attr("stroke-width", 1) 
     .attr("stroke", "black"); 

但這是一種不可持續的做法，因爲我的數據集將包括成千上萬的緯度/經度對。

希望有人能指出我的代碼在正確的方向。我希望我接近，因爲沒有錯誤被拋出。或者，也許我正在採取一種可怕的方法來繪製點之間的線條，在這種情況下，有人在兔子洞之前讓我知道。這是我的代碼工作Plunker。

在此先感謝。

Answer 1

Plunker：http://plnkr.co/edit/ooLkR8iec5NKx0Ns1zcD?p=preview

你似乎明白數據結合根據您的圓圈

svg.selectAll("circle") 
    .data(points).enter() 
    .append("circle") 
    .attr("cx", function (d) {return projection(d)[0]; }) 
    .attr("cy", function (d) { return projection(d)[1]; }) 

沒有理由你不能行做同樣的創建。

svg.selectAll("line") 
    .data(data) 
    .enter() 
    .append("line") 
    .attr("x1", d=>projection(d[0])[0]) 
    .attr("y1", d=>projection(d[0])[1]) 
    .attr("x2", d=>projection(d[1])[0]) 
    .attr("y2", d=>projection(d[1])[1]) 

請注意我對初始數據結構做了什麼，以及如何修改它以使用圓vs線。

順便說一下，屬性d僅適用於path元素。