Javascript 如何直观地动态重新定位二叉树节点

我一直在使用以下代码：。这是树的图形表示。我去掉了大部分代码（优雅的标签），每个父节点只允许两个节点，并将数据结构更改为数组

现在唯一剩下的问题是重新定位。原始代码完美地做到了这一点。但是因为我想要一个二叉树，所以我让用户选择插入一个左或右子树。原始的“重新定位”代码直接从父对象向下设置第一个子对象的动画，但在二叉树中这是错误的。我要它要么向左走，要么向右走

reposition = function (v) {
    function repos(v) {
        var lC = getLeafCount(v.v),
            left = v.p.x; //parent's x-position

        v.c.forEach(function (d) {
            var vc = d; //saving reference of the child in parent object
            d = tree.getVerticeById(d.v); //actually fetching the child object
            var w = 0;
            if(d.d == 'right') { w += 15 * lC }
            if(d.d == 'left') { w -= 15 * lC }
            d.p = {x: left + w, y: v.p.y + tree.h}; //setting the position
            vc.p = d.p; //setting the child's pos in parent obj
            repos(d);
        });
    }
    repos(v[0]);
};

我的代码的某些部分与原始代码不同，因为我已经如前所述更改了数据结构。我试图对可能令人困惑的部分进行评论，但重要的是重新定位的数学

起初，这段代码似乎工作得很好（）。但是在一些测试之后，我发现了重新定位的一个巨大问题：节点彼此崩溃（）

---

结论：我试图修改原始函数，以考虑节点的左右定位，但未能做到。我写了这个方法的变体，但它仍然有一些问题，如图所示。我将非常感谢您在这件事上的一些意见。

我最终解决了这个问题

在运行问题中发布的重新定位函数后，我运行了另一个函数来修复问题。新函数遍历树的所有级别，并检查节点是否靠得太近。如果是，算法会找到最近的共同祖先，并增加其左右子代之间的距离。在此之后，节点之间不再发生碰撞