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 笔记本中使用的方法相同，他使用多个自定义路径生成器来创建径向布局。