在地圖上用D3.js

得分我有一個geoJSON的郵政編碼質心點，我正在繪製一個D3.js地圖。我可以讓他們顯示，但我無法調整點的大小。我假設.attr（「r」，1）會這樣做，但我必須錯過一些東西。在地圖上用D3.js

 d3.json("ZipPoints.json", function (zipPoints) { 
      svg.selectAll("g") 
       .data(zipPoints.features) 
       .enter() 
       .append("path") 
       .attr("d", path) 
       .attr("r", 1) 
       .style("fill", "red"); 
     });

編輯：

 d3.json("ZipPoints.json", function (zipPoints) { 
      points.selectAll("circle") 
       .data(zipPoints.features) 
       .enter() 
       .append("circle") 
       .attr("r", 1.5) 
       .attr("transform", function(d, i) { 
        return "translate(" + projection(zipPoints.features[i].geometry.coordinates) + ")"; 
       }) 
       .style("fill", "red") 
       .classed("point", true);  
     });

來源

2014-03-19 bailey

爲什麼追加「路徑」元素而不是圓圈？ – tomtomtom

我不知道，我從來沒有這樣做過。那是我應該做的嗎？我將「路徑」更改爲「圈子」，我的觀點不渲染。 – bailey

它看起來像你在GeoJSON中實際定義爲路徑的「點」。在這種情況下，正確的方法是修改GeoJSON來增加標記的大小，儘管你可以通過增加筆劃寬度來修改它。 –

你可以嘗試以下。

var pins = svg.append("g"); 
d3.json("ZipPoints.json", function(zipPoints) { 
    pins.selectAll("circle") 
     .data(zipPoints.features) 
     .enter() 
     .append("circle") 
     .attr("r", 5) 
     .style("fill", "red") 
     .classed("pin", true); 
});

您可能需要在這些點上進行轉換以正確渲染它們（我猜）。在這種情況下，您可以使用以下代碼。（我使用的轉換函數需要繪製在使用特定投影構建的地圖上具有經緯度，長信息的數據）。

.attr("transform", function(d) { 
    /*whatever transformation that needs to be done*/ 
    return "translate(" + projection([ d.lon, d.lat ]) + ")"; 
})

來源

2014-03-20 04:48:11 Serendipity

在地圖上用D3.js

回答

相關問題