javascript - d3 可缩放 TreeMap - 每个父宽度的动态文本宽度

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>标记并从中拉出宽度，获取 outerWidth，以及其他一些尝试均无济于事。

我想知道 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; });
}