D3.js将rect调整为文本大小:getBBox()？

Question

我正在使用D3.js创建一个力导向图,请参阅JSFiddle:http://jsfiddle.net/pwxecn8q/.

该text和rect被放置在同一组中.附加rects时我想text为同一组选择元素.调用getBBox()它并使用这些值来调整大小rect以适应文本"in"它.但是,我不确定如何text在追加rects 时从同一组中选择元素...

关于如何解决这个问题的任何建议？

相关代码:

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

});

Answer 1

您可以使用节点的边界框(g元素,其中包含文本).

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

更新了jsfiddle:http://jsfiddle.net/pwxecn8q/3/