添加文字到符號地圖

Question

我最近一直在學習D3，我一直在玩這個symbol map tutorial。

我已經嘗試了很多事情來獲取任何數據顯示在符號作爲文本，我似乎無法弄清楚如何做到這一點。

好像我需要沿線加

.text(function(d) { return d.properties.population; }) 

一些地方。我試過在各個地方使用.append或.selectAll，但是我無法讓它工作。

Answer 1

你可以通過兩種方式來解決這個問題，你可以使用工具提示或者將地圖放在地圖上。這些關於this google group conversation等工具提示以及包括這些生物視覺鏈接的鏈接的討論很多：Simple tooltip和Tooltips as a helper。在bl.ocks例如你已經對準了使用簡單的工具提示選項將需要增加2行代碼爲：

svg.selectAll(".symbol") 
     .data(centroid.features.sort(function(a, b) { return b.properties.population - a.properties.population; })) 
    .enter().append("path") 
     .attr("class", "symbol") 
     .attr("d", path.pointRadius(function(d) { return radius(d.properties.population); })) 
    .append("title") 
     .text(function (d) { return d.properties.name; }); 

要將文本添加到您需要附加一些SVG文本元素的地圖。所以你需要設置類似於上面符號塊的東西，並計算文本的x和y。這樣做可能有更優雅的方式，但這使得它很清楚發生了什麼。 x和y由path.centroid來計算，它返回你的點的屏幕座標。

svg.selectAll("text") 
     .data(centroid.features).enter()  
    .append("text") 
     .attr("x", function (d) { return path.centroid(d)[0]; }) 
     .attr("y", function (d) { return path.centroid(d)[1]; }) 
     .text(function (d) { return d.properties.name; }); 

希望這有助於

您可以在行動，在這個bl.ock看到他們兩個。