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

Question

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

考虑到根节点是'Level 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; }); 

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

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

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