Javascript D3.js将rect调整为文本大小：getBBox（）？

我正在使用D3.js创建一个力定向图，请参见JSFiddle:

text

和

rect

放在同一组中。追加

rect

s时，我想为同一组选择

text

元素。在其上调用

getBBox（）

，并使用这些值调整

rect

的大小，以适应其中的文本。但是，在追加

rect

s时，我不确定如何从同一组中选择

text

元素

有没有关于如何进行的建议

有关守则：

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 + ")";
    });

});

---

可以使用节点的边界框（

g

元素，其中包含文本）

---

更新了JSFIDLE:

成为工作小提琴。谢谢@RB.，我不知道发生了什么。我刚刚用正确的链接更新了答案。不，不，谢谢！我的头撞在砖墙上，你救了我！谢谢，伙计，这节省了时间。这是我找到的最好的解决办法。

node.selectAll('rect')
    .attr("width", function(d) {return this.parentNode.getBBox().width;})