D3树状图直边

Question

在documentation on d3.cluster()中，我没有看到开发人员可以用来设置连接线类型的任何内容。似乎只有曲线样条线连接，但这不是树状图的最常规样式-至少对于我而言。我需要的是垂直定向的90度角连接节点：

问题

根据文档判断，没有直接的内置解决方案，但是d3.cluster()可以提供什么来实现上述结果？还是我最好从头开始编写所有代码？

Answer 1

此问题在"d3js Tree square"中曾被问过。但是，我真的不认为这是重复的，因为那个老问题是使用D3 v3 ，而且事实证明，它不容易适应v5。此外，您明确要求垂直布局。

尽管如此，基本方法还是一样：只需使用自定义路径生成器。在旧版v3 Block的基础上，可以执行以下操作：

svg.selectAll(".link")
  .data(root.links())
  .enter().append("path")
    .attr("d", elbow);   // Appended paths use the custom path generator.

// Custom path generator    
function elbow(d) {
  return "M" + d.source.x + "," + d.source.y + "H" + d.target.x + "V" + d.target.y;
}

在使用v5 API进行一些小的修改后，Mike Bostock的演示可以重写为Vertical "Elbow" Dendrogram。

请注意，这与Mike Bostock在Tree of Life笔记本中使用的方法相同，他在笔记本中使用了多个自定义路径生成器来创建径向布局。