vue dagre-d 3を用いてフローチャートを生成

vueファイル

<template>
    <div>
        <svg width="1000" height="1500">
            <g />
            <rect />
        </svg>
    </div>
</template>

<script>
    import dagreD3 from "dagre-d3";
    import * as d3 from "d3";
    export default {
        data() {
            return {
                list: {
                    nodeInfos: [
                        {
                            id: "1",
                            label: "   ",
                        },
                        {
                            id: "2",
                            label: "   -   ",
                        },
                        {
                            id: "3",
                            label: "QA-   ",
                        },
                        {
                            id: "4",
                            label: "  -   ",
                        },
                        {
                            id: "5",
                            label: "  ",
                        }
                    ],
                    edges: [
                        {
                            source: "1",
                            target: "2",
                            label: "  "
                        },
                        {
                            source: "1",
                            target: "3",
                            label: "  "
                        },
                        {
                            source: "3",
                            target: "4",
                            label: "  "
                        },
                        {
                            source: "3",
                            target: "2",
                            label: "  "
                        },
                        {
                            source: "4",
                            target: "5",
                            label: "  "
                        },
                        {
                            source: "4",
                            target: "2",
                            label: "  "
                        },
                        {
                            source: "2",
                            target: "2",
                            label: "  "
                        },
                        {
                            source: "2",
                            target: "3",
                            label: "  "
                        }
                    ]
                }
            };
        },
        mounted() {
            //  D3
            var g = new dagreD3.graphlib.Graph().setGraph({});
            console.log(g)
            //     
            this.list.nodeInfos.forEach((item, index) => {
                item.rx = item.ry = 5;//  
                g.setNode(item.id, item);
                //      fill      ，stroke       
                g.node(item.id).style = 'fill:' + 'green' + ';stroke: green;'
            });
            //     
            this.list.edges.forEach(item => {
                g.setEdge(item.source, item.target, {
                    //        
                    label: item.label,
                    //      
                    style: "stroke: #0fb2cc; fill: none;",
                    //     
                    arrowheadStyle: "fill: #0fb2cc;stroke: #0fb2cc;",
                    //     （vee       ，     ）
                    arrowhead: 'vee',
                });
            });
            g.nodes().forEach(function (v) {
                console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
            });
            g.edges().forEach(function (e) {
                console.log("Edge " + e.v + " -> " + e.w + ": " + JSON.stringify(g.edge(e)));
            });
            //    
            var svg = d3.select("svg"),
                inner = svg.select("g");
            //  
            var zoom = d3.zoom().on("zoom", function () {
                inner.attr("transform", d3.event.transform);
            });
            svg.call(zoom);
            var render = new dagreD3.render();
            console.log(render, 'render')
            render(inner, g);
            console.log(inner, 'inner111')
            let code;
            inner.selectAll("g.node").on("click", e => {
                //    
                code = this.list.nodeInfos.filter(item => {
                    return item.id == e;
                });
                console.log(code);
            })
            .on('mouseover', e => {
                let curNode = g.node(e)
                console.log(curNode, 'curNode')
            });
            //        
            var initialScale = 1;
            //     
            svg.call(
                zoom.transform,
                d3.zoomIdentity
                    .translate(
                        (svg.attr("width") - g.graph().width * initialScale) / 2,
                        20
                    )
                    .scale(initialScale)
            );
            svg.attr("height", g.graph().height * initialScale + 40);
        }
    };
</script>

<style lang="less">
    svg {
        font-size: 14px;
    }
    .node rect {
        stroke: #606266;
        fill: #fff;
    }
    .edgePath path {
        stroke: #606266;
        fill: #333;
        stroke-width: 1.5px;
    }
</style>

gitプロジェクト接続:https://github.com/chunchundong/dagre3参照先:https://blog.csdn.net/qq_31505287/article/details/103489301?depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-2&utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-2