d3.js - 在可縮放，可點擊的地圖上繪製點

我正在嘗試修改在http://bl.ocks.org/mbostock/2206340處找到的地圖並繪製一些點。我有數據，我想在一個名爲data.csv一個CSV文件，該文件的格式像這樣使用（經度和緯度）：d3.js - 在可縮放，可點擊的地圖上繪製點

lon_0,lat_0,lon_1,lat_1 
-122.1430195,37.4418834,-122.415278,37.778643 
-122.1430195,37.4418834,-122.40815,37.785034 
-122.4194155,37.7749295,-122.4330827,37.7851673 
-122.4194155,37.7749295,-122.4330827,37.7851673 
-118.4911912,34.0194543,-118.3672828,33.9164666 
-121.8374777,39.7284944,-121.8498415,39.7241178 
-115.172816,36.114646,-115.078011,36.1586877

修改的代碼我做了包含在下面的代碼片段

d3.json("us-states.json", function(json) { 
    d3.csv("data.csv", function(data) { 
    dataset = data.map(function(d) { return [ +d["lat_0"], +d["lon_0"] ]; }); 
    console.log(data) 
    states.selectAll("circle") 
    .data(data) 
    .enter() 
    .append("circle") 
    .attr("cx", function(d) { 
       return projection([d["lon_0"], d["lat_0"] ])[0]; 
       }) 
    .attr("cy", function(d) { 
       return projection([d["lon_0"],d["lat_0"] ])[1]; 
       }) 
    .attr("r", 5) 
    .style("fill", "red"); 

}); 

    states.selectAll("path") 
     .data(json.features) 
    .enter().append("path") 
     .attr("d", path) 
     .on("click", click); 


});

地圖呈現良好，但地塊沒有顯示。任何想法在這裏可能是錯的？我試過了一堆不同的東西，我不確定它是否是覆蓋點的狀態圖，或者投影是否有問題...

來源

2013-04-02 araspion

您是否看到[本教程]（http://bost.ocks.org/mike/map/）？它使用了一個稍微不同的方法，但解釋了所有步驟。 –

我看過本教程，但認爲城市繪製的方式並不是非常相關，因爲它們是直接從topoJSON對象加載的。我不清楚那裏的內容可能適用於從csv加載等。 – araspion

您可以合併兩個數據集，這將使它們更容易繪圖。無論如何，它看起來像你將座標的字符串值傳遞給投影，而不是你在'dataset'中創建的數字。我錯過了什麼，或者這是問題嗎？ –

示例中繪製的路徑是填充，即在它們後面的任何東西都將被遮蓋。 SVG元素按照它們指定的順序繪製。在你的情況下，首先繪製圓，然後繪製狀態的路徑，從而模糊圓圈。

它在繪製圓之前繪製狀態路徑時起作用。

來源

2013-04-02 18:25:48

d3.js - 在可縮放，可點擊的地圖上繪製點

回答

相關問題