以自上而下/自下而上的方式制作D3 js家族树

时间:2018-08-30 07:13:37

标签: javascript d3.js tree family-tree

我一直在使用d3.tree来绘制类似此js fiddle的家谱。但是,该树中的节点以呼吸优先的方式附加(它们的附加顺序用/标记,其顺序例如:“ / 13”)所以我的问题是

是否可以通过自上而下或自下而上的方式制作d3家谱?

当ksav问我第一次呼吸时是什么意思: 我的意思是,具有相同深度的节点将首先被附加,而具有更大深度的子节点将被附加(它们的附加顺序由“ / append_order”表示,例如“ / 13”)。孩子,他们会在兄弟姐妹的孩子之下(在最后一层查看“ Ls”和“ LSH”的孩子)。因此,如果有任何方式可以将孩子附加在父母之后,父母兄弟姐妹之前,这样可能会导致自上而下或自下而上的方法

这是我使用的数据结构:

        var root_13=
    {
        name: "",
        id: 1,
        hidden: true,
        no_parent: true,
        children: 
        [{
            name: "LF",
            id: 16,
            no_parent: true,
            status:"M",
            gender:"Male"
        },{
        name: "",
        id: 2,
        no_parent: true,
        hidden: true,
        children: [
            {
                name: "LS",
                id: 139,
                status:"M",
                gender:"Female"

            },{
                name: "",
                id: 128,
                status:"M",
                no_parent: true,
                hidden:true,
                children: [{
                    name: "LS child1",
                    id: 128,
                    status:"M",
                    no_parent: false,
                    hidden:false,
                    children: []

                },{
                    name: "",
                    id: 1289,
                    status:"M",
                    no_parent: true,
                    hidden:true,
                    children: []

                },{
                    name: "child1 part",
                    id: 1281,
                    status:"M",
                    no_parent: true,
                    hidden:false,
                    children: []

                },{
                    name: "child 2",
                    id: 1289,
                    status:"M",
                    no_parent: false,
                    hidden:false,
                    children: []

                },{
                    name: "",
                    id: 1280,
                    status:"M",
                    no_parent: true,
                    hidden:true,
                    children: []

                },{
                    name: "child 2 part",
                    id: 12891,
                    status:"M",
                    no_parent: true,
                    hidden:false,
                    children: []

                },{
                    name: "child 3",
                    id: 12891,
                    status:"M",
                    no_parent: false,
                    hidden:false,
                    children: []

                },{
                    name: "",
                    id: 12891,
                    status:"M",
                    no_parent: true,
                    hidden: true,
                    children: []

                },{
                    name: "child 3",
                    id: 12891,
                    status:"M",
                    no_parent: true,
                    hidden:false,
                    children: []

                }]

            },{
                name: "LSH",
                id: 138,
                status:"M",
                gender:"Male",
                no_parent:true

            },{
                name: "L",
                id: 13,
                status:"M",
                gender:"Male"

            },{
                name: "",
                id: 122,
                status:"M",
                no_parent: true,
                hidden:true,
                children: []

            },{
                name: "J",
                id: 12,
                status:"M",
                no_parent: true,
                gender:"Female"

            },{
                name: "JS",
                id: 125,
                status:"M",
                no_parent: false,
                gender:"Female"

            },{
                name: "",
                id: 12,
                status:"M",
                no_parent: true,
                hidden: true,
                gender:"Female"

            },{
                name: "JP",
                id: 12,
                status:"M",
                no_parent: true,
                gender:"Female"

            }]
        },
        {
            name: "LM",
            id: 10,
            no_parent: true,
            status:"M",
            gender:"Female",
            children: []
        }
        ]
    }

0 个答案:

没有答案