D3.js 带盒子的D3树

以我有限的D3知识，我结合了一些树布局示例来制作一个带有分支标签的可折叠树。以下是一个功能摘录：

var root={
儿童：[
{
标题：“节点标题”，
儿童：[
{
键入：“结束”，
项目：[]，
optionTitle：“分支机构1”
},
{
键入：“结束”，
项目：[]，
optionTitle：“分支机构2”
}
]
}
]
}
var MaxLabellLength=23；
var i=0；
var持续时间=750；
//定义根
root.x0=viewerHeight/2；
root.y0=0；
var viewerWidth=800；
var viewerHeight=300；
var-tree=d3.layout.tree（）；
var diagonal=d3.svg.diagonal（）
.投影（功能（d）{
返回[d.y，d.x]；
});
功能访问（家长、访客、儿童fn）{
如果（！父项）返回；
探视（家长）；
var childrenFn=childrenFn（父母）；
if（儿童）{
var count=children.length；
对于（变量i=0；i0）{
如果（levelWidth.length，则需要对当前布局进行的更改如下：


移动蓝色框，使其与圆圈垂直对齐，并使右边缘与每个圆圈的左侧相邻

更改路径以在每个蓝色框的左侧终止


第一种方法是使用变换来改变蓝色框的位置，第二种方法是改变每条线的目标点的坐标

查看您链接到的示例，在提供颜色的
foreignObject
元素后面有
rect
元素，并且
foreignObject
与
rect
元素的位置偏移。我已经自由地将
rect
元素添加到您的代码中并对
rect
和
foreignObject
元素组合在一起，以便在单个变换中移动它们：

var rectGrpEnter = nodeEnter.append('g')
    .attr('class', 'node-rect-text-grp');

rectGrpEnter.append('rect')
    .attr('rx', 6)
    .attr('ry', 6)
    .attr('width', rectNode.width)
    .attr('height', rectNode.height)
    .attr('class', 'node-rect');

rectGrpEnter.append('foreignObject')
    .attr('x', rectNode.textMargin)
    .attr('y', rectNode.textMargin)
    .attr('width', function() {
        return (rectNode.width - rectNode.textMargin * 2) < 0 ? 0 :
            (rectNode.width - rectNode.textMargin * 2)
    })
    .attr('height', function() {
        return (rectNode.height - rectNode.textMargin * 2) < 0 ? 0 :
            (rectNode.height - rectNode.textMargin * 2)
    })
    .append('xhtml').html(function(d) {
        return '<div style="width: ' +
            (rectNode.width - rectNode.textMargin * 2) + 'px; height: ' +
            (rectNode.height - rectNode.textMargin * 2) + 'px;" class="node-text wordwrap">' +
            '<b>' + d.title + '</b>' +
            '</div>';
    });

var rectGrpEnter = nodeEnter.append('g')
    .attr('class', 'node-rect-text-grp')
    .attr('transform', 'translate('
    + -(rectNode.width + circleRadius) + ','  // note the transform is negative
    + -(rectNode.height/2) + ')' );

现在编写转换：

var rectGrpEnter = nodeEnter.append('g')
    .attr('class', 'node-rect-text-grp');

rectGrpEnter.append('rect')
    .attr('rx', 6)
    .attr('ry', 6)
    .attr('width', rectNode.width)
    .attr('height', rectNode.height)
    .attr('class', 'node-rect');

rectGrpEnter.append('foreignObject')
    .attr('x', rectNode.textMargin)
    .attr('y', rectNode.textMargin)
    .attr('width', function() {
        return (rectNode.width - rectNode.textMargin * 2) < 0 ? 0 :
            (rectNode.width - rectNode.textMargin * 2)
    })
    .attr('height', function() {
        return (rectNode.height - rectNode.textMargin * 2) < 0 ? 0 :
            (rectNode.height - rectNode.textMargin * 2)
    })
    .append('xhtml').html(function(d) {
        return '<div style="width: ' +
            (rectNode.width - rectNode.textMargin * 2) + 'px; height: ' +
            (rectNode.height - rectNode.textMargin * 2) + 'px;" class="node-text wordwrap">' +
            '<b>' + d.title + '</b>' +
            '</div>';
    });

var rectGrpEnter = nodeEnter.append('g')
    .attr('class', 'node-rect-text-grp')
    .attr('transform', 'translate('
    + -(rectNode.width + circleRadius) + ','  // note the transform is negative
    + -(rectNode.height/2) + ')' );

检查生成的树：


var rectNode={
宽度：120，
身高：45，
文本边距：5
};
变量根={
时间：100，
儿童：[{
标题：“节点标题”，
儿童：[{
键入：“结束”，
项目：[]，
optionTitle：“分支机构1”
},
{
键入：“结束”，
项目：[]，
optionTitle：“分支机构2”
}
]
}]
}
var MaxLabellLength=23；
var i=0；
var持续时间=750；
//定义根
root.x0=viewerHeight/2；
root.y0=0；
var viewerWidth=800；
var viewerHeight=300；
var-tree=d3.layout.tree（）；
var diagonal=d3.svg.diagonal（）
.投影（功能（d）{
返回[d.y，d.x]；
});
功能访问（家长、访客、儿童fn）{
如果（！父项）返回；
探视（家长）；
var childrenFn=childrenFn（父母）；
if（儿童）{
var count=children.length；
对于（变量i=0；i0）{
if（levelWidth.length root.x）{
d、 x+=（d.x-根x）*3；
}
});
//更新节点…
var node=svgGroup.selectAll（“g.node”）
.数据（节点、功能（d）{
返回d.id|