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