D3 Canvas地球儀在LongLat上的文字

Question

我今天的問題是關於D3，並使用Canvas在地球儀上以long/lat顯示文字。我基本上得到的是一個使用mbostock世界巡迴演唱會製作的地球儀，它有一個長/拉特的列表，並旋轉地球以專注於它們。我已經有了點標記，但是我想要在所有點旁邊顯示一些文本。目前，這只是城市名稱，但目的是在地球更充實的情況下顯示更多信息。我創建的代碼一個普拉克：https://plnkr.co/edit/CzfoF4bkPv93l3Yxwu3N?p=preview

在普拉克相關的代碼是：

return function(t) { 
    projection.rotate(r(t)); 
    c.clearRect(0, 0, width, height); 
    c.fillStyle = "#ccc", c.beginPath(), path(land), c.fill(); 
    for (var j = 0; j < points.length; j++) { 
     c.fillStyle = "#000", c.beginPath(), path(points[j]), c.fill(); 
    } 
    c.strokeStyle = "#000", c.lineWidth = 2, c.beginPath(), path(globe), c.stroke(); 
}; 

基本上我要求的是稍微顯示文本的特定長權的方式/地球上的座標使用畫布。任何和所有的幫助，不勝感激。先謝謝你！

Answer 1

最簡單的方法是添加一個文本在你的補間功能繪製的功能後：

c.fillText(points[i].location,projection(points[i].coordinates)[0]+10,projection(points[i].coordinates)[1]+2); 

隨着可變projection，projection([long,lat])回報[x,y]，換句話說，它給人一種向前突出由經度和緯度表示的給定點，在地圖座標空間（您的svg或畫布）中返回座標。

一旦你有投影座標，你可以根據需要操縱它們。在這種情況下，我向x值加了10來將地名進一步推向右邊。見this plunker。