Javascript 使子节点靠近d3中的父节点

我试图开发一个树形图，其中有一个中心节点，它将有4个子节点。那些 子节点将有7个不同的节点，但这7个不同的节点应显示在其父节点附近，如附图所示。如果我试图减小该值以使它们更接近，则树的一侧（左侧或右侧）会被弄乱

这就是我所做的

line.link{
笔画：黑色；
}
线路硬连接{
笔画：黑色；
笔画宽度：2px；
}

JS-Bin
风险值数据={
“名称”：root@gmail.com",
“儿童”：[{
“姓名”：“人名1”，
“儿童”：[{
“名称”：“分支机构4.1”
}, {
“名称”：“分支机构4.2”
}, {
“名称”：“分支机构4.2”
},
{
“名称”：“分支机构4.2”
}, {
“名称”：“分支机构4.2”
},
{
“名称”：“分支机构4.2”
}
]
}, {
“姓名”：“人名2”，
“儿童”：[{
“名称”：“分支机构4.1”
}, {
“名称”：“分支机构4.2”
}, {
“名称”：“分支机构4.2”
},
{
“名称”：“分支机构4.2”
}, {
“名称”：“分支机构4.2”
},
{
“名称”：“分支机构4.2”
}
]
}, {
“姓名”：“人名3”，
“儿童”：[{
“名称”：“分支机构4.1”
}, {
“名称”：“分支机构4.2”
}, {
“名称”：“分支机构4.2”
},
{
“名称”：“分支机构4.2”
}, {
“名称”：“分支机构4.2”
},
{
“名称”：“分支机构4.2”
}
]
}, {
“姓名”：“人名4”，
“儿童”：[{
“名称”：“分支机构4.1”
}, {
“名称”：“分支机构4.2”
}, {
“名称”：“分支机构4.2”
},
{
“名称”：“分支机构4.2”
}, {
“名称”：“分支机构4.2”
},
{
“名称”：“分支机构4.2”
}
]
}]
};
const LAST_CHILDREN_WIDTH=13；
让flagForChildren=false；
设群=[]；
data.children.forEach（d=>{
设a=[]；
如果（d.children.length>0）{
flagForChildren=true；
}
for（设i=0；i=6）{
子对象=对象。分配（子对象{
儿童：[{
姓名：“…”
}]
});
}
a、 推（儿童）；
}
}
d、 儿童=a；
组：推（d）；
});
data.children=组；
让split_index=Math.round（data.children.length/2）；
矩形高度=45；
让leftData={
name:data.name，
children:JSON.parse（JSON.stringify（data.children.slice（0，split_索引）））
};
让leftDataArray=[]；
leftDataArray.push（leftData）；
//正确的数据
设rightData={
name:data.name，
children:JSON.parse（JSON.stringify（data.children.slice（split_index）））
};
//创建d3层次结构
设right=d3.层次结构（rightData）；
left=d3.层次结构（leftData）；
//渲染两棵树
drawTree（右，“右”）；
drawTree（左，“左”）；
//画一棵树
函数绘图树（根，位置）{
让开关_CONST=1；
如果（位置==“左”）{
开关常数=-1；
}
常量边距={
前20名，
右:120,，
底数：20，
左：120
},
宽度=window.innerWidth-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
设svg=d3
.选择（“svg”）
.attr（“高度”，高度+边距。顶部+边距。底部）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（'view-box'，'0'+（宽度+边距.右侧）+''+（高度+边距.顶部+边距.底部））
.style（“页边空白顶部”、“20px”）
.样式（“左边距”、“88px”）；
常量div=d3.选择（“正文”）.追加（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，0）；
//将整棵树的宽度移动一半
设g=svg.append（“g”）.attr（“transform”，“translate”（+width/2+”，0）”）；
让deductWidthValue=flagForChildren？0：宽度*0.33；
//创建新的默认树布局
设tree=d3
.tree（）
//设定大小
//记住树是旋转的
//因此，高度用作宽度
//宽度等于高度
.尺寸（[高度-50，开关常数*（宽度-扣除宽度值）/2]）
.分离（（a，b）=>a.parent===b.parent？4:4.25）；
树（根）；
让nodes=root.substands（）；
让links=root.links（）；
//将两个根节点设置为垂直死点
节点[0].x=height/2；
//创建链接
设link=g
.selectAll（“.link”）
.数据（链接）
.enter（）；
链接
.附加（“行”）
.attr（“类”，函数（d）{
如果（d.target.depth==2）{
返回“链接”
}否则{
返回“硬链接”
}
})
.attr（“x1”，函数（d）{
如果(
d、 target.depth==3
) {
返回0；
}
返回d.source.y+100/2；//d.source.y+100/2
})
.attr（“x2”，函数（d）{
如果(
d、 target.depth==3
) {
返回0；
}else if（d.target.depth==2）{
返回d.target.y；
}
返回d.target.y+100/2；//d.target.y+100/2；
})
.attr（“y1”，函数（d）{
.attr("transform", function (d) {
    if (d.parent && d.parent.parent) { // this is the leaf node
        if (d.parent.parent.parent) {
            return (
                "translate(" +
                d.parent.y +
                "," +
                (d.x + LAST_CHILDREN_WIDTH + 15) +
                ")"
            );
        }
        return "translate(" + d.y + "," + d.x + ")";
    }
        // Select the node with height 2
    if (d.height == 2) {
            //Lets line this up with its 2nd child (index = 1)
            //If y of this child is <0, it means the parent and the child 
            //both are on the left 
            //side (with margin of 20 between parent and child)
        if (d.children[1]['y'] < 0) {
            return "translate(" + (d.children[1]['y'] + LAST_CHILDREN_WIDTH + 20) + "," + d.children[1]['x'] + ")"
            // Else both parent and child are on the right. 
            //Now we also need to take into consideration the width 
            //of the rectangle (with margin of 20 between parent and child)
        } else {
            return "translate(" + (d.children[1]['y'] - rectangleWidth(d) - 20) + "," + (d['x']) + ")"
        }
    } else {
            //This is the root of the tree.
            //Subtract d.y by half of rectangleWidth because we need it to be in the center
            //Same for d.x
        return "translate(" + (d.y - (rectangleWidth(d) / 2)) + "," + (d.x - (rectangleHeight / 2)) + ")";
    }
});