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

时间:2014-09-29 18:32:54

标签: javascript d3.js

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

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

或两者的组合。

欣赏是否有人可以指出想法/代码示例来合并这些

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

1 个答案:

答案 0 :(得分:1)

当您致电x时,D3树的布局会填充数据的ytree.nodes()属性。现在只需操纵y值即可展开"展开"树,以便在文本的每个级别之间留出足够的空间。

这样做的简单方法是根据其深度简单地缩放每个节点的y值。创建树布局后,执行:

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

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

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

这使树变得更大,但只要文本不重叠,它看起来就像你想要的那样。如果你想让树更小并且包装文本以便更长的文本出现在两行或更多行中,你可以通过包装每个"行"在一个tspan(example here)。当然,您必须移动相邻节点,以便节点的包装文本不会与其邻居重叠。