G6实现家族族谱关系图

二话不说就上效果图：

当然我最初想要的效果图是这个样子的：

来看看我们的实现代码吧：

<template>
    <div class="demo g6">
        <CommonTitle></CommonTitle>
        <div class="content">
            <div id="container"></div>
        </div>
    </div>
</template>

<script>
    import CommonTitle from "@/components/CommonTitle.component.vue"

    export default {
        name: "TestG6Dagre",
        components: {
            CommonTitle
        },
        mounted() {
            const data = {
                // 节点的先后顺序与位置有关，应该从左到右，从上到下列举
                nodes: [
                    {id: "yy", name: "爷爷", layType: "lay-1"},
                    {id: "nn", name: "奶奶", layType: "lay-1"},
                    {id: "wg", name: "外公", layType: "lay-1"},
                    {id: "wp", name: "外婆", layType: "lay-1"},
                    {id: "gg", name: "姑姑", layType: "lay-2"},
                    {id: "bb", name: "爸爸", layType: "lay-2"},
                    {id: "mm", name: "妈妈", layType: "lay-2"},
                    {id: "jj", name: "舅舅", layType: "lay-2"},
                    {id: "jm", name: "舅妈", layType: "lay-2"},
                    {id: "w", name: "我", layType: "lay-3"},
                    {id: "qz", name: "妻子", layType: "lay-3"},
                    {id: "bd", name: "表弟", layType: "lay-3"},
                    {id: "nx", name: "女婿", layType: "lay-4"},
                    {id: "ne", name: "女儿", layType: "lay-4"},
                    {id: "ez", name: "儿子", layType: "lay-4"},
                    {id: "ex", name: "儿媳", layType: "lay-4"},
                    {id: "wsn", name: "外孙女", layType: "lay-5"},
                    {id: "sz", name: "孙子", layType: "lay-5"},
                ],
                edges: [
                    {source: "yy", target: "gg"},
                    {source: "yy", target: "bb"},
                    {source: "nn", target: "bb"},
                    {source: "nn", target: "gg"},
                    {source: "wg", target: "mm"},
                    {source: "wg", target: "jj"},
                    {source: "wp", target: "mm"},
                    {source: "wp", target: "jj"},
                    {source: "bb", target: "w"},
                    {source: "mm", target: "w"},
                    {source: "jj", target: "bd"},
                    {source: "jm", target: "bd"},
                    {source: "w", target: "ez"},
                    {source: "w", target: "ne"},
                    {source: "qz", target: "ez"},
                    {source: "qz", target: "ne"},
                    {source: "ez", target: "sz"},
                    {source: "ex", target: "sz"},
                    {source: "ne", target: "wsn"},
                    {source: "nx", target: "wsn"},
                ],
            };

            G6.registerNode("custom-node", {
                options: {
                    anchorPoints: [[0.5, 0], [0.5, 1]]
                },
                draw(cfg, group) {
                    const rect = group.addShape("rect", {
                        attrs: {
                            x: -50,
                            y: -20,
                            width: 100,
                            height: 40,
                            radius: 10,
                            stroke: "#5B8FF9",
                            fill: "#C6E5FF",
                            lineWidth: 3,
                            cursor: "pointer",
                        },
                        name: "rect-shape",
                    });
                    if (cfg.name) {
                        group.addShape("text", {
                            attrs: {
                                text: cfg.name,
                                x: 0,
                                y: 0,
                                fill: "#00287E",
                                fontSize: 14,
                                textAlign: "center",
                                textBaseline: "middle",
                                fontWeight: "bold",
                            },
                            name: "text-shape",
                        });
                    }
                    return rect;
                },
            }, "rect");

            const container = document.getElementById("container");
            const width = container.scrollWidth;
            const height = container.scrollHeight || 500;
            const graph = new G6.Graph({
                container: "container",
                width,
                height,
                layout: {
                    type: "dagre",
                    nodesep: 50,    // 节点间距
                    ranksep: 40,    // 层间距
                    controlPoints: false,   // 是否保留布局连线的控制点
                },
                defaultNode: {
                    type: "custom-node",
                },
                defaultEdge: {
                    // type: "polyline",
                    type: "line",
                    style: {
                        radius: 20,
                        offset: 45,
                        lineWidth: 2,
                        stroke: "#333333",
                    },
                    sourceAnchor: 1,
                    targetAnchor: 0
                },
                nodeStateStyles: {
                    selected: {
                        stroke: "#d9d9d9",
                        fill: "#5394ef",
                    },
                },
                modes: {
                    default: [
                        "drag-canvas",
                        "zoom-canvas",
                        "click-select",
                        // {
                        //     type: "tooltip",
                        //     formatText(model) {
                        //         const cfg = model.conf;
                        //         const text = [];
                        //         cfg.forEach((row) => {
                        //             text.push(row.label + ":" + row.value + "<br>");
                        //         });
                        //         return text.join("\n");
                        //     },
                        //     offset: 30,
                        // },
                    ],
                },
                fitView: true,
            });
            graph.data(data);
            graph.render();

            if (typeof window !== "undefined")
                window.onresize = () => {
                    if (!graph || graph.get("destroyed")) return;
                    if (!container || !container.scrollWidth || !container.scrollHeight) return;
                    graph.changeSize(container.scrollWidth, container.scrollHeight);
                };
        },
        methods: {},
    }
</script>

<style scoped lang="stylus">
    @import "~@/common/css/common.style.styl"
    .demo
        width: 100%
        height: 100%
        .content
            width: 100%
            height "calc(100% - %s)" % commonHeight
            #container
                width: 100%
                height 100%
</style>

 当然，我也尝试了另一种效果，

将此处注释放开： 

 但中间会出现这些多余或重复的线，不知各位大佬有何见解，还请指教！