我使用此示例作为基础在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上实现与树图上相同的功能(如折叠节点或动态样式),以及有关树木的树状图的文档是非常稀缺的。
因此,如果你们中的任何一方能够解决上述尝试的解决方案之一,或者提出一个我没有想到的更好的解决方案,那将非常感激。