D3树垂直分隔 [英] D3 tree vertical separation

问题描述

我使用D3树布局，例如： http：//mbostock.github。 com / d3 / talk / 20111018 / tree.html

I am using the D3 tree layout, such as this one: http://mbostock.github.com/d3/talk/20111018/tree.html

我已根据我的需要修改它，并遇到问题。例子也有同样的问题，如果你有太多的节点打开，他们变得紧凑，使阅读和互动困难。我想要定义节点之间的最小垂直间距，同时重新调整大小以允许这样的间距。

I have modified it for my needs and am running into an issue. The example has the same issue too where if you have too many nodes open then they become compact and makes reading and interacting difficult. I am wanting to defined a minimum vertical space between nodes while re-sizing stage to allow for such spacing.

我尝试修改分离算法使其工作：

I tried modifying the separation algorithm to make it work:

.separation(function (a, b) {
    return (a.parent == b.parent ? 1 : 2) / a.depth;
})

这没有用。我还尝试计算哪个深度有最多的孩子，然后告诉舞台的高度 children * spaceBetweenNodes 。这使我更接近，但仍然不准确。

That didn't work. I also tried calculating which depth had the most children then telling the height of the stage to be children * spaceBetweenNodes. That got me closer, but still was not accurate.

depthCounts = [];
nodes.forEach(function(d, i) { 
    d.y = d.depth * 180;

    if(!depthCounts[d.depth])
        depthCounts[d.depth] = 0;

    if(d.children)
    {
        depthCounts[d.depth] += d.children.length;
    }
});

tree_resize(largest_depth(depthCounts) * spaceBetweenNodes);

我还试图更改节点的 x 值也在下面的方法中计算 y 分离，但没有雪茄。我会发布这个更改，但我从我的代码中删除它。

I also tried to change the node's x value too in the method below where it calculates the y separation, but no cigar. I would post that change too but I removed it from my code.

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

如果你可以建议一种方法或知道一个方法，职位。我会非常感谢。

If you can suggest a way or know a way that I can accomplish a minimum spacing vertically between nodes please post. I will be very grateful. I am probably missing something very simple.

推荐答案

我在Google网上论坛上的一位用户的帮助下得知了这一点。我找不到这个职位。解决方案需要你在一个地方修改D3.js，这是不推荐，但它是唯一的，以解决这个问题，我可以找到。

I was able to figure this out with help from a user on Google Groups. I was not able to find the post. The solution requires you to modify D3.js in one spot, which is not recommended but it was the only to get around this issue that I could find.

5724 或此方法： d3_layout_treeVisitAfter

更改：

d3_layout_treeVisitAfter(root, function(node) {
    node.x = (node.x - x0) / (x1 - x0) * size[0];
    node.y = node.depth / y1 * size[1];
    delete node._tree;
});

至：

d3_layout_treeVisitAfter(root, function(node) {
    // make sure size is null, we will make it null when we create the tree
    if(size === undefined || size == null) 
    { 
        node.x = (node.x - x0) * elementsize[0]; 
        node.y = node.depth * elementsize[1]; 
    } 
    else 
    { 
        node.x = (node.x - x0) / (x1 - x0) * size[0];
        node.y = node.depth / y1 * size[1]; 
    } 
    delete node._tree;
});

下面添加一个新变量： elementsize ，默认为 [1,1] 到5731行。

Below add a new variable called: elementsize and default it to [ 1, 1 ] to line 5731

var hierarchy = d3.layout.hierarchy().sort(null).value(null)
    , separation = d3_layout_treeSeparation
    , elementsize = [ 1, 1 ] // Right here
    , size = [ 1, 1 ];

下面是一个名为 tree.size = function 。添加以下定义：

Below that there is a method called tree.size = function(x). Add the following below that definition:

tree.elementsize = function(x) {
    if (!arguments.length) return elementsize;
    elementsize = x;
    return tree;
};

最后，当您创建树时，可以更改 elementsize 像这样

Finally when you create the tree you can change the elementsize like so

var tree = d3.layout.tree()
             .size(null)
             .elementsize(50, 240);

这篇关于D3树垂直分隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！