d3.js径向树布局可变节点长度/文本换行节点描述

d3.js radial tree layout variable node length / text wrap node description

本文关键字：节点文本描述换行变节 js 布局 d3 更新时间：2023-09-26

我正试图基于mbostock的reingold tilford树示例在d3.js上创建一个径向层次结构。bl.ocks.org上的区块如下：http://bl.ocks.org/ratnakarv/43087fb7f373338bf62c

考虑到根节点是"级别0"，级别2的一些节点和级别3的一些节点的文本正在侵占子节点的文本。我可能会考虑两种解决方案：1.随着级别的增加而增加边的长度（随着文本长度随着层次结构中的级别而增加）2.包括一个换行功能，使看起来更整洁

或者两者的组合。

如果有人能给我介绍一些想法/代码示例来结合这些，我将不胜感激

[注意：我对d3.js有一个基本的想法。我不是一个数据可视化者，主要构建这些可视化来描述我的主要工作]

D3的树布局在调用tree.nodes()时填充数据上的x和y属性。现在只需要操纵y值来"展开"树，以便在每个级别之间有足够的空间来放置文本。

一种简单的方法是根据每个节点的深度简单地缩放其y值。创建树状布局后，执行：

nodes.forEach(function(d) { d.y = d.depth * 180; });

在这里工作小提琴：http://jsfiddle.net/sk7krdrp/1/

您甚至可能希望将缩放设置为最大节点文本长度的函数。

这使得树大了很多，但看起来这就是你想要的，只要文本不重叠。如果您想保持树较小并包装文本，以便较长的文本显示在两行或更多行中，可以通过在tspan中包装每个"行"来实现这一点（这里的示例）。当然，您必须在相邻节点之间移动，这样节点的换行文本就不会与相邻节点重叠。