使用 javascript 生成动态树答案

【问题标题】：Dynamic Tree Generation using javascript使用 javascript 生成动态树
【发布时间】：2017-03-03 12:14:56
【问题描述】：

我的树结构如下：

{
    "7": ["3", "8"],
    "3": ["2", "4", "1"],
    "4": ["5", "6"],
    "8": ["12", "13"]
}

这本字典仅仅意味着树的根节点是 7（因为它不是任何其他节点的子节点），它有两个子节点 3 和 8，而 3 有三个子节点（2、4、1），而 8 有两个孩子（12 岁、13 岁）。 3 有一个孩子 4 有两个孩子 (5,6)。

我的问题是我需要一个动态树生成器，因为每次我运行代码时都会有不同的树（而且它们不会是二叉树！）结构。我的代码在 python 中，我想在 web 中显示树。

是否有任何 javascript 库可以用来绘制这棵树？

【问题讨论】：

请求图书馆是不可能的。
有任意数量的；我只是从寻找开始。虽然如果你想画这样的病态树，在不存在节点的地方，你可能会遇到麻烦。
@DaveNewton，这棵树应该是有效的，我可以保证。 :)
这可能会有所帮助：stackoverflow.com/questions/6344318/…

标签： javascript tree

【解决方案1】：

您可以迭代对象的键并构建具有所有关系的新临时对象。然后从根数组中删除所有具有前驱的键。

返回一个带有根键和所有子键的新对象。

var data = { 7: ["3", "8"], 3: ["2", "4", "1"], 4: ["5", "6"], 8: ["12", "13"] },
    tree = function (object) {
        var root = Object.keys(data),
            o = Object.create(null),
            r = Object.create(null);

        root.slice().forEach(function (k) {
            o[k] = o[k] || {};
            data[k].forEach(function (a) {
                var p = root.indexOf(a);
                if (p !== -1) {
                    root.splice(p, 1);
                }
                o[a] = o[a] || {};
                o[k][a] = o[a];
            });
        });
        r[root] = o[root];
        return r;
    }(data);

console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：