D3树布局 - 当孩子超过一定数量时自定义垂直布局 [英] D3 Tree Layout - Custom Vertical Layout when children exceed more than a certain number

问题描述

我试图使用D3树布局创建一个家庭树的排序和我注意到的一个事情是，当我有很多孩子节点，它将水平伸展到屏幕上。理想情况下，我想为这些节点更垂直的布局，以便人们不必在屏幕上滚动，而只是继续往下看树。

这里是什么我目前看到：

/ p>

现在它可能不是那么糟糕，但如果我说了20个孩子，它会跨越整个屏幕，这是我想避免的东西。

我遇到过问题，例如，他说他不得不玩弄实际的d3js代码。我想避免这样，所以我希望找出是否这是可能与d3js，因为它是现在，如果是，如何去呢？我不需要一个完整的答案，但一段代码证明这是可能的将是非常有帮助的。

如果有必要，我可以上传一个JSFiddle的人玩

解决方案

查看这个小提琴：

http://jsfiddle.net/dyXzu/

我从 http://bl.ocks.org/mbostock/4339083 获取示例代码，并做了一些修饰。请注意，在示例中，x和y在绘制时切换，因此布局显示为垂直树。

重要的是修改深度计算器： p>

原始：

  。 
 nodes.forEach（function（d）{d.y = d.depth * 180;}）; 
  

固定：

  //规范化固定深度。 
 nodes.forEach（function（d）{
 dy = d.depth * 180; 
 if（d.parent！= null）{
 dx = d.parent.x - （d.parent.children.length-1）* 30/2 
 +（d.parent.children.indexOf（d））* 30; 
} 
 //如果节点有太多的孩子，进入并将他们的位置固定到两列。
 if（d.children！= null& d.children.length> 4）{
 d.children.forEach （函数（d，i）{
 dy =（d.depth * 180 + i％2 * 100）; 
 dx = d.parent.x  - （d.parent.children.length-1 ）* 30/4 
 +（d.parent.children.indexOf（d））* 30/2 -i％2 * 15; 
}）; 
} 
} ）; 
  

基本上，我手动计算每个节点的位置，覆盖d3的默认节点定位。注意，现在没有x的自动缩放。你可能手动地通过计算打开的节点（d.children不为null，如果他们存在，d._children存储节点，当他们关闭时）手动，然后加起来总x。

具有两列布局中的子元素的节点看起来有点时髦，但是改变线条绘制方法应该会改善。

I'm trying to use the D3 Tree Layout to create a family tree of sorts and one of the things I noticed is that when I have many children nodes, it would stretch out horizontally across the screen. Ideally I would like a more vertical layout for these nodes so that people don't have to scroll across the screen and can just keep looking down the tree.

Here is what I currently see:

Now it might not be that bad, but if I had say 20 children, it would span across the whole screen and that is something I kind of want to avoid.

I have seen questions like this but this doesn't help me because I want a specific layout and not simply a resize... I have large nodes and they begin to collide with one another if I try to dynamically resize the tree -- shrinking the tree does not do me any good. I specifically need a different layout for situations where there are more than a certain number of children.

Here is kind of what I was envisioning/hoping for. Notice the root does not make this format because it has only 4 children. Ideally I want it so that if a parent has 5 or more children, it would result in the layout below. If the root had 5 children, it would result in this layout and the layout should simply stretch out vertically if users wanted to see the root's grandchildren (the A, B, C... nodes). If necessary I can get a diagram of that going:

I found a semi-similar question regarding custom children layouts and he said he had to play around with the actual d3js code. I kind of want to avoid this so I am hoping to find out if this is possible with d3js as it is right now and, if so, how to go about it? I don't need a complete answer, but a snippet of code proving that this is possible would be very helpful.

If necessary I can upload a JSFiddle for people to play around with.

解决方案

Check out this fiddle:

http://jsfiddle.net/dyXzu/

I took the sample code from http://bl.ocks.org/mbostock/4339083 and made some modifications. Note that in the example, x and y are switched when drawing so the layout appears as a vertical tree.

The important thing I did was modifying the depth calculator:

Original:

// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });

Fixed:

// Normalize for fixed-depth.
nodes.forEach(function (d) {
    d.y = d.depth * 180;
    if (d.parent != null) {
        d.x =  d.parent.x - (d.parent.children.length-1)*30/2
        + (d.parent.children.indexOf(d))*30;
    }
    // if the node has too many children, go in and fix their positions to two columns.
    if (d.children != null && d.children.length > 4) {
        d.children.forEach(function (d, i) {
            d.y = (d.depth * 180 + i % 2 * 100);
            d.x =  d.parent.x - (d.parent.children.length-1)*30/4
            + (d.parent.children.indexOf(d))*30/2 - i % 2 * 15;
        });
    }
});

Basically, I manually calculate the position of each node, overriding d3's default node positioning. Note that now there's no auto-scaling for x. You could probably figure this out manually by first going through and counting open nodes (d.children is not null if they exist, d._children stores the nodes when they are closed), and then adding up the total x.

Nodes with children in the two-column layout look a little funky, but changing the line-drawing method should improve things.

这篇关于D3树布局 - 当孩子超过一定数量时自定义垂直布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！