Question

我正在使用d3.js可视化来描绘节点。我现在收到的文字。我有一个代码来调整rect的宽度，具体取决于进入它的文本的长度。但是，有时候它不起作用，文本就会超出矩形框。这是代码。

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

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

如何在d3.js中将我的svg的矩形框中的文本拟合？

1 个答案: