即使在缩放时也要将文本保留在矩形内

Question

我正在显示圈子作为标记。每个圆的值通常在0到200之间（可以有2个小数）。

我正在尝试在矩形内显示圆圈和包含其旁边值的标签。

CODE

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")
    .style("fill", "red");

    //Box containing the station label
data.append("rect")
    .attr("class", "stationBox")
    .attr("width", function(d) {
        return 10 + 4 * d.value.toString().length;
    })
    .attr("height", 10)
    .attr("x", function(d) {
        return ((d.coordinates.x + 5000) / 450);
    })
    .attr("y", function(d) {
        return ((-d.coordinates.y + 170000) / 450 - 10);
    })
    .attr("fill", "lemonchiffon")
    .style("cursor", "pointer");

//Station label
data.append("text")
    .attr("class", "stationLabel")
    .attr("x", function(d) {
        return ((d.coordinates.x + 5000) / 450 + 2);
    })
    .attr("y", function(d) {
        return ((-d.coordinates.y + 170000) / 450 - 2);
    })
    .attr("text-anchor", "right")
    .style("font-size", "0.7em")
    .style("fill", "black")
    .text(function(d) {
        return d.value;
    })
    .style("cursor", "pointer");

这将显示此，看起来没问题。

我的主要问题是我可以放大/缩小我的地图。我需要将文本保留在矩形内部+它们需要缩小才能放大。

我尝试更改文本的font-size和矩形的width但是如何选择新值？

修改

这是一个有效的jsfiddle。您可以看到，放大时，文本会变大，矩形也会变大。我需要它们保持小而且文本需要留在矩形内