Question

我正在使用找到的树图模板here.

就目前的情况而言，我对代码进行了一些修改，以便能够显示更多信息，并包括用于长时间运行的描述的文本换行。为此，我将以下ptext和tspan标签替换为foreignObject和xhtml:div标签，如下所示：

已替换

var t = g.append("text")
    .attr("class", "ptext")
    .attr("dy", ".75em")

t.append("tspan")
    .text(function(d) { return d.key; });
t.append("tspan")
    .attr("dy", "1.0em")
    .text(function(d) { return formatNumber(d.value); });
t.call(text);

使用

var t = g.append("foreignObject")
    .attr("class", "foreignobj");

t.append("xhtml:div")
    .html(function (d) {
        if (d.status != null) return "<p>Name: " + d.key + "</p>";
        else return d.key;
    })
    .attr("class", "textdiv");

t.append("xhtml:div")
    .html(function (d) {
        if (d.status != null) return "<p>Status: " + d.status + "</p>";
        else return "";
    })
    .attr("class", "textdiv");

t.append("xhtml:div")
    .html(function (d) {
        if (d.description != null) return "<p>Description: " + d.description + "</p>";
        else return "";
    })
    .attr("class", "textdiv");

因此，现在可以对文本进行换行了，但是foreignObject的宽度不等于父级的宽度，因此，如果文本区域较小，并且与其他<rect>区域重叠，名称/状态/说明足够长，并且文字会自动换行。

我尝试为foreignObject添加一个基于父级高度的属性，但是这导致了错误的宽度，我认为这是在渲染渲染的早期从子节点中拉出的。树状图。

var t = g.append("foreignObject")
                .attr("class", "foreignobj")
                .attr("width", $(this).parent().attr("width"));

我还尝试过找到最接近的<rect>标签，并从中拉出宽度，获取externalWidth，还有其他一些尝试都没有用。

我想知道如何将foreignObject的宽度设置为等于父级的宽度，以便文本仅在框的边缘处换行？

Answer 1

我可以通过在脚本底部的text()函数中更改以下代码来弄清楚这一点：

function text(text) {
    text.selectAll("foreignobj")
        .attr("x", function(d) { return x(d.x) + 6; });
    text.attr("x", function(d) { return x(d.x) + 6; })
        .attr("y", function(d) { return y(d.y) + 6; })
        // Added the following line
        .attr("width", function(d) { return x(d.x + d.dx) - x(d.x) - 6; });
}

d3可缩放树形图-每个父级宽度的动态文本宽度

1 个答案: