[英]“Leaf-justify” D3 tree graphs?
一种实现方法是发现树的深度,并将没有任何子节点的每个节点的depth
属性设置为该值。
假设您的树数据如下:
var data = [
{
"name": "Top Level",
"parent": "null",
"children": [
{
"name": "Level 2: A",
"parent": "Top Level",
"children": [ ...
您使用以下方法创建了一棵树:
var tree = d3.layout.tree();
你可以得到depth
通过搜索的最大值每个节点树的depth
:
var treeDepth = d3.max(tree(data[0]), function(d) { return d.depth; });
一旦有了它,就可以在每次重新计算树布局时将其重置:
tree.nodes(data[0]).forEach(function(d) {
var depthSize = 50;
if (!d.children) { // this node has no children
d.depth = treeDepth; // set depth to depth of tree
}
d.y = d.depth * depthSize; // recalculate y
});
这适用于示例中从左到右排列的树木。 对于自上而下的布局,您必须改为dx
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.