Question

我一直在使用以下代码：http://bl.ocks.org/NPashaP/7683252。这是树的图形表示。我删除了大部分代码（优雅标签），每个父节点只允许两个节点，并将数据结构更改为数组。

现在唯一的问题是重新定位。原始代码完美地做到了。但由于我想要一个二叉树，我让用户选择插入一个左或右孩子。原始的重新定位代码会直接从父级动画第一个子项，但这在二叉树中是错误的。我希望它向左或向右移动。

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

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

首先，此代码似乎运行良好（https://i.stack.imgur.com/gjzOq.png）。但经过一些测试后，我发现重新定位存在一个巨大的问题：节点相互崩溃（https://i.stack.imgur.com/pdQfy.png）！

结论：我试图修改原始函数，以便记住节点的左右定位，但是无法做到。我写了这个方法的变体，但它仍然有一些问题，如图中所示。我会感谢你在这件事上的一些意见。

Answer 1

我最终快速解决了这个问题。

运行问题中发布的重新定位功能后，我运行了另一个修复问题的功能。新功能遍历树的所有级别，并检查节点是否距离太近。如果是，则算法找到最接近的共同祖先，并增加其左右儿童之间的距离。在此之后，节点之间不再发生冲突。

如何以可视方式动态重新定位二进制树节点

1 个答案: