Question

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

text和rect位于同一组中。附加rect时，我想为同一组选择text元素。在其上调用getBBox()并使用这些值调整rect的大小以使其中的文本“适合”。但是，我不确定在追加text时如何从同一组中选择rect元素......

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

相关代码：

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/

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

1 个答案: