D3.js 更改d3强制布局链接样式以匹配d3树外观

我正在进行另一次尝试，用d3绘制家谱。为此，我想使用通常的节点链接图（如：

但使用通常在中找到的链接样式，即具有水平（或垂直）端点的贝塞尔曲线：

---

是否可以在不深入d3力代码的情况下相应地更改连杆？

如果您只是想匹配连杆的样式，无需深入d3力代码，它只计算位置，而不计算与样式相关的任何内容

每个链接都有源和目标的x和y值。如果将大多数强制布局示例中链接源和目标的线替换为路径，则可以使用这些x和y值来设置所需链接类型的样式

下面我使用的是d3v4+，您的示例使用的是d3v3

选项1-使用内置链接

在d3v3中，您可以使用

d3.svg.diagonal

，但现在有

d3.linkVertical（）

和

d3.linkHorizontal（）

来实现同样的功能。有了这些，我们可以使用：

d3.linkVertical()
      .x(function(d) { return d.x; })
      .y(function(d) { return d.y; }));

然后用以下形状表示链接的路径：

 link.attr("d",d3.linkVertical()
      .x(function(d) { return d.x; })
      .y(function(d) { return d.y; }));

我在下面只做了一个垂直样式，但是您可以确定x坐标中的差异是否大于y坐标，以确定您应该应用水平样式还是垂直样式

var svg=d3.选择（“svg”）；
var nodes=“abcdefg”.split（“”）.map（函数（d）{
返回{name:d}；
})
var links=“bcdef”.split（“”）.map（函数（d）{
返回{目标：“a”，源：d}
})
推送（{target:“d”，source:“b”}，{target:“d”，source:“g”}）
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{return d.name；}））
.力（“电荷”，d3.力人体（）.力（-1000））
.力（“中心”，d3.力中心（250150））；
var node=svg.append（“g”）
.selectAll（“圆圈”）
.数据（节点）
.enter（）.append（“圆”）
.attr（“r”，5）
var link=svg.append（“g”）
.selectAll（“路径”）
.数据（链接）
.enter（）.append（“路径”）
模拟
.节点（节点）
.on（“勾选”，勾选）
.force（“链接”）
.链接（links）；
函数勾选（）{
link.attr（“d”，d3.linkVertical（）
.x（函数（d）{返回d.x；}）
.y（函数（d）{return d.y；}））；
节点
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
}

路径{
笔画：黑色；
笔画宽度：2px；
填充：无；
}

---

非常好！我意识到我可以同时使用选项2，但即使在那里，你还是设法用

[“M”，x0，y0，“C”，xcontrol，y0，xcontrol，y1，x1，y1]向我展示了一个很好的技巧谢谢你，伙计！