javascript - D3.js调整矩形到文本大小: getBBox()?

Question

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

text 和 rect 放置在同一组中。附加 rect 时，我想为同一组选择 text 元素。对其调用 getBBox() 并使用这些值来调整 rect 的大小以适合其中的文本。但是，我不确定在附加 rects 时如何从同一组中选择 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 + ")";
    });

});

Answer 1

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

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

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