避免在d3.js中的树布局中的节点重叠 [英] Avoid overlapping of nodes in tree layout in d3.js

问题描述

我已经创建了一个可折叠的树来表示一些生物数据。

I have created a collapsible tree to represent some biological data.

在这棵树中，节点的大小表示节点的重要性。由于我有一个巨大的数据，并且节点的大小不同，它们彼此重叠。我需要指定兄弟节点之间的距离。

In this tree the size of the node represents the importance of the node. As I have a huge data and also the sizes of the nodes vary,they overlap over each other. I need to specify the distance between the sibling nodes.

我尝试了tree.separation（）方法，但它不工作。

I tried tree.separation() method but it didn't work.

代码如下：

tree.separation(seperator);

function seperator(a, b)
{
    if(a.parent == b.parent)
    {
        if((a.abundance == (maxAbd)) || (b.abundance == (maxAbd)))
        {
            return 2;
        }
        else
        {
            return 1;
        }
    }
}

：

Unexpected value translate(433.33333333333337,NaN) parsing transform attribute.

我理解在添加分离方法后，无法计算节点的x坐标。任何人都可以帮助我如何做这个？

I understand that that after adding the separation method it is unable to calculate the x coordinate for the nodes. Can anyone please help me with how to do this?

我也尝试按照 https://groups.google.com/forum/#!topic/d3-js/7Js0dGrnyek ，但没有工作。

I also tried modifying the source code as suggested in https://groups.google.com/forum/#!topic/d3-js/7Js0dGrnyek but that did not work either.

请提出一些解决方案。

推荐答案

问题。这是我如何解决它。我有宽度分配给每个节点，现在的高度对于所有节点是相同的（基本上节点的高度小于nodeHeight，垂直居中）：

I had the same problem. This is how I solved it. I have width assigned to each node, height for now is the same for all nodes (basically nodes with smaller height than nodeHeight, get centered vertically):

var tree = d3.layout.tree().nodeSize([1, nodeHeight])
           .separation(function(a, b) {
               var width = a.width + b.width,
                   distance = width / 2 + 16; // horizontal distance between nodes = 16
                   return distance;
           }),
    nodes = tree.nodes(data),
    links = tree.links(nodes);

希望这有帮助。

这篇关于避免在d3.js中的树布局中的节点重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！