javascript - 如何在 d3.js 中适应我的 svg 矩形框中的文本？

Question

我正在使用 d3.js 可视化来描绘节点。我现在收到短信了。我有一个代码可以根据进入矩形的文本长度调整矩形的宽度。但是，有时它不起作用，文本超出了矩形框。这是相关代码。

nodeEnter.append("rect").attr("x",
        function(d) {
            var x = d.name.length;
            x = x + 150;
            return -(x) / 2;
        }).attr("y", -10).attr(
        "width",
        function(d) {
            var x = d.name.length;
            x = x + 150;
            return x;
        }).attr("height", 20).style({
        "fill": function(d) {
            return d._children ? "lightsteelblue" : "#fff";
        },
        "stroke": "steelblue",
        "stroke-width": "1.5px"
    });

    nodeEnter.append("text").attr("x", 0).attr("y", 0)
        .attr("dy", ".35em").attr(
            "text",
            function(d) {
                return d.children || d._children ? "end" : "start";
            }).text(function(d) {
            return d.name;
        }).style({
            "fill-opacity": 1e-6,
            "font-size": "10px",
            "font-family": "sans-serif"
        }).attr(
            "text-anchor", "start");

在这里，我将文本的长度放入框中并添加了 150。但是，没有超过一点。我可以在这里得到任何帮助吗？

根据使用 getBBox() 的建议。我尝试使用它，这是编辑后的代码

var text = nodeEnter.append("svg:text").attr("x", 0).attr("y", 0)
    .attr("dy", ".35em").attr(
        "text",
        function(d) {
            return d.children || d._children ? "end" : "start";
        }).text(function(d) {
        return d.name;
    }).style({
        "fill-opacity": 1e-6,
        "font-size": "10px",
        "font-family": "sans-serif"
    }).attr(
        "text-anchor", "middle");
    
    var bbox = text.node().getBBox();
    nodeEnter.append("rect").attr("x",
        function(d) {
            var x = d.name.length;
            x = x + 150;
            return -(x) / 2;
        }).attr("y", -10).attr(
        "width", bbox.width).attr("height", bbox.height)
        .style({
        "fill": function(d) {
            return d._children ? "lightsteelblue" : "#fff";
        },
        "stroke": "steelblue",
        "stroke-width": "1.5px"
    });

这使得矩形框内的文本消失，只有溢出的文本可见

Answer 1

首先创建具有恒定宽度的矩形。
然后创建文本元素并将边界框的宽度 getBBox().width 作为属性添加到数据集(例如 twidth)。
最后根据添加的属性 (twidth) 按宽度更新矩形元素。