避免d3.js中树布局中的节点重叠

Question

我创建了一个可折叠树来表示一些生物数据.

在此树中,节点的大小表示节点的重要性.由于我拥有庞大的数据,并且节点的大小也各不相同,因此它们相互重叠.我需要指定兄弟节点之间的距离.

我尝试了tree.separation()方法,但它没有用.

代码如下:

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坐标.任何人都可以帮我解决这个问题吗？

我也尝试按照https://groups.google.com/forum/#!topic/d3-js/7Js0dGrnyek中的建议修改源代码,但这也无效.

请提出一些解决方案.

Answer 1

我有同样的问题.这就是我解决它的方式.我为每个节点分配了宽度,现在的高度对于所有节点都是相同的(基本上高度小于nodeHeight的节点,垂直居中):

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);

希望这可以帮助.