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

Question

我正在尝试基于 mbostock 的 reingold-tilford 树示例在 d3.js 上创建径向层次结构。bl.ocks.org 上的区 block 位于:http://bl.ocks.org/ratnakarv/43087fb7f373338bf62c

考虑到根节点是“级别 0”，级别 2 的某些节点和级别 3 的某些节点的文本正在侵占子节点的文本。我可以考虑两种解决方案:1.随着级别的增加而增加边缘的长度(因为文本长度随着层次结构中级别的增加而增加)2. 包含自动换行功能，使外观更整洁

或两者的组合。

如果有人能给我指出一些想法/代码示例来合并这些内容，我将不胜感激

[注意:我对 d3.js 有一个基本的了解。我不是数据可视化人员，主要构建这些可视化来描述我的主要工作]

Answer 1

当您调用 tree.nodes() 时，

D3 的树布局会填充数据上的 x 和 y 属性。现在只需操作 y 值来“展开”树，以便每个级别之间有足够的空间容纳文本。

执行此操作的一个简单方法是根据节点的深度简单地缩放每个节点的 y 值。创建树布局后，执行以下操作:

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

在这里工作 fiddle :http://jsfiddle.net/sk7krdrp/1/

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

这使得树变得更大，但看起来这就是你想要的，只要文本不重叠。如果您想让树保持更小并换行文本，以便较长的文本出现在两行或更多行中，您可以通过将每个“行”换行在 tspan ( example here ) 中来实现。当然，您必须在相邻节点周围移动，以便节点的换行文本不会与其相邻节点重叠。