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

我在d3中以这个示例为基础制作了一个树形图：

但是，我没有根据深度标准化y坐标，而是根据每个节点的权重计算y坐标：

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

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

但是，这会导致一个问题，因为强制到图的同一级别的许多节点现在是重叠的。因此，我需要指定一个最小距离。我尝试了几种方法来解决这个问题：

我首先发现d3具有树的大小和节点分离的内部参数（如源代码1所述）。因此，我尝试通过以下方式指定树的大小：

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

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

为了更好地衡量，我将相同的维度赋予SVG本身：

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

根据来源2，这实际上是我问题的解决方案。然而，结果并不乐观。尽管SVG在页面上变得非常大，但树本身根本没有改变大小。它保持了原来的大小，并留下了大量的空白

因此，我尝试以这种方式指定分离：

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

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

函数分离（）{
树。分离（函数（a，b）{
返回a.weight-b.weight<5？中等签名数：2；
});
}

这不起作用的原因有很多：首先，它只指定了直系兄弟姐妹之间的距离。这是无用的，因为我处理的是具有相同权重的重叠节点，但不一定是兄弟节点。第二，当我将间隔变大时，它实际上并没有增加指定节点之间的距离。相反，它以相同的比例减少了其余节点之间的距离。虽然这是一种卑鄙的方式来完成我告诉节点要做的事情，但它最终与我想要的恰恰相反

进一步思考：

我可以像计算y一样计算x值。然而，这很快就会变得非常复杂，试图重新发明d3的轮子很容易产生更多的bug

我可以在节点上实现强制它们分离的力，类似于源代码3。然而，我似乎找不到在树形图上实现部队布局的直接方法

我可以把整棵树重做为一个系统图，这将允许可变的分支长度，如源代码4所示。然而，我找不到任何方法在系统图上实现与树形图相同的功能（例如折叠节点或动态样式），关于与树相关的系统图的文档非常稀少

---

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

资料来源：1）2）3）4）有机会使用JSFIDLE.net吗？！