d3树:指定节点之间的最小距离

时间:2015-07-06 21:21:09

标签: javascript d3.js svg tree force-layout

我使用此示例作为基础在d3中创建了一个树形图: http://bl.ocks.org/robschmuecker/7880033

然而,我不是根据深度对y坐标进行归一化,而是根据每个节点的权重计算y坐标:

nodes.forEach(function(d) {
        d.y = (maximumWieght - d.wieght + 1) * 20; 
    });

这样,无论实际深度如何,相等权重的节点都处于图形的同一级别。

然而,这会导致一个问题,因为许多被强制到图表相同级别的节点现在都重叠了。因此,我需要指定最小距离。我尝试过几种方法:

我首先发现d3具有树的大小和节点分离的内部参数(如源1中所述)。因此,我尝试以这种方式指定树的大小:

var tree = d3.layout.tree().size([reallyBigNumber, viewerWidth]);

并且,为了更好地衡量,我给SVG本身赋予了相同的维度:

var svg = d3.select("body").append("svg")
.attr("width", viewerWidth)
.attr("height", reallyBigNumber)

根据来源2,这实际上解决了我的问题。但是,结果并不理想。尽管SVG在页面上变得非常大,但树本身并没有改变大小。它的大小保持不变,留下了很多空白。

然后我尝试用这种方式指定分离:

function separate() {
    tree.separation(function(a, b) {
        return a.weight - b.weight < 5 ? moderatelyBigNumber : 2;
    });
}

由于多种原因,这不起作用:首先,它只指定了直接兄弟姐妹之间的距离。这是没用的,因为我处理的重叠节点具有相同的权重,但根本不一定是兄弟节点。其次,当我将分离放大时,实际上并没有增加指定节点之间的距离。相反,它以相同的比例减少了其余节点之间的距离。虽然这是做我告诉节点要做的事情的一种卑鄙的方式,但它最终与我想要的完全相反。

进一步的想法:

我可以像对y一样计算x值。然而,这变得非常复杂,并且试图重新发明d3的轮子很容易造成更多的错误。

我可以在节点上实施强制它们分离的力,类似于源3.但是,我似乎无法找到在树形图上实现力布局的直接方式。

我可以将整个树重做为一个phylogram,这将允许变量分支长度,如源4中所示。但是,我找不到任何方法在一个phylogram上实现与树图上相同的功能(如折叠节点或动态样式),以及有关树木的树状图的文档是非常稀缺的。

因此,如果你们中的任何一方能够解决上述尝试的解决方案之一,或者提出一个我没有想到的更好的解决方案,那将非常感激。

0 个答案:

没有答案