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
})