D3JS - 圓圈上的標籤框

Question

我在地圖上顯示多個圓圈，並且需要添加將顯示特定值的標籤。這看起來應該是這樣 紅線是沒有必要

我現在已經是

的問題是，如果該號碼內大，這將是在邊界之外寫入長方形。我怎樣才能管理這個？矩形的寬度如何與內部值的大小成比例？

的Javascript

//circle 
data.append("circle") 
    .attr("class", "station") 
    .attr("r", 5) 
    .attr("cx", function(d) { 
     return (d.coordinates.x + 5000)/450; 
    }) 
    .attr("cy", function(d) { 
     return (-d.coordinates.y + 170000)/450; 
    }) 
    .style("stroke-width", .5) 
    .style("cursor", "pointer"); 
//box 
data.append("rect") 
    .attr("width", 10) 
    .attr("height", 10) 
    .attr("x", function(d) { 
     return ((d.coordinates.x + 5000)/450 - 2); 
    }) 
    .attr("y", function(d) { 
     return ((-d.coordinates.y + 170000)/450 - 10); 
    }) 
    .attr("fill", "white"); 
//text 
data.append("text") 
    .attr("x", function(d) { 
     return ((d.coordinates.x + 5000)/450 + 2); 
    }) 
    .attr("y", function(d) { 
     return ((-d.coordinates.y + 170000)/450 - 2); 
    }) 
    .style("font-size", "1.3 em") 
    .attr("text-anchor", "middle") 
    .text(function(d) { 
     return d.value; 
    }) 
    .style("cursor", "pointer"); 

Answer 1

您需要設置width值取決於你的標籤長度​​

data.append("rect") 
.attr("width", function(d) { 
    return 10 + 5 * d.value.length; // 10 and 5 are arbitrary values 
})