javascript - D3 树状图直边

Question

浏览documentation on d3.cluster()我没有看到开发人员可以用来设置连接线类型的任何内容。似乎只有一种弯曲的样条连接，但这不是树状图最传统的样式——至少对于我的情况而言。我想要的是垂直方向的 90 度 Angular 连接节点:

问题

从文档来看，没有直接的内置解决方案，但是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 中使用的方法相同他在其中使用多个自定义路径生成器来创建径向布局的笔记本。