D3.js anpassen rect-zu-text-Größe: getBBox()?

Ich bin momentan dabei, ein force-directed-graph unter Verwendung D3.js finden Sie in JSFiddle: http://jsfiddle.net/pwxecn8q/.

Den text und rect sind in der gleichen Gruppe gelegt. Beim Anhängen der rects I möchten, wählen Sie die text element für die gleiche Gruppe. Rufen Sie getBBox() es auf und verwenden Sie diese Werte, um die Größe des rect passen Sie den text "in" es. Allerdings bin ich mir nicht sicher, wie Sie die text element aus der gleichen Gruppe beim Anhängen der rects...

Irgendwelche Vorschläge, wie gehen über diese?

Den entsprechenden code:

var color = d3.scale.category20();


var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var force = d3.layout.force()
    .gravity(.05)
    .distance(100)
    .charge(-100)
    .size([width, height]);

force.nodes(graphData.nodes)
    .links(graphData.links)
    .start();

var link = svg.selectAll(".link")
    .data(graphData.links)
    .enter().append("line")
    .attr("class", "link");

var node = svg.selectAll("g.node")
    .data(graphData.nodes)
    .enter()
    .append("g")
    .attr("class", "node")




node.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 10)
    .attr("height", 10)
    .style("fill", function (d) {
    return color(d.group);
})
    .call(force.drag);



node.append("text")
    .attr("x", 0)
    .attr("y", 10)
    .attr("text-anchor", "middle")
    .text(function (d) {
    return d.name
})




force.on("tick", function () {
    link.attr("x1", function (d) {
        return d.source.x;
    })
        .attr("y1", function (d) {
        return d.source.y;
    })
        .attr("x2", function (d) {
        return d.target.x;
    })
        .attr("y2", function (d) {
        return d.target.y;
    });

    node.attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    });

});