#

luxiaotao1123

2024-01-25 f72591f60b2428db2b1b0f384f8c2df005fba538

 zy-asrs-flow/src/pages/G6.jsx

@@ -1,14 +1,156 @@
import React, { useEffect, useRef } from 'react';
import { Graph, Extensions, extend } from '@antv/g6';

function G6() {
const ExtGraph = extend(Graph, {
    transforms: { 'transform-v4-data': Extensions.TransformV4Data },
    edges: {
        'cubic-horizontal-edge': Extensions.CubicHorizontalEdge,
        'cubic-vertical-edge': Extensions.CubicVerticalEdge,
    },
    behaviors: {
        'activate-relations': Extensions.ActivateRelations,
    },
});

    return (
        <>
            <h1>Hello Flow</h1>
            <div style={{ height: '200vh' }}>
const G6 = () => {
    const containerRef = useRef(null);
    const graphRef = useRef(null);

            </div>
        </>
    )
    useEffect(() => {
        const container = containerRef.current;
        const width = container.scrollWidth;
        const height = container.scrollHeight || 500;

        const graph = new ExtGraph({
            container,
            width,
            height,
            transforms: [
                {
                    type: 'transform-v4-data',
                    activeLifecycle: ['read'],
                },
            ],
            modes: {
                default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'collapse-expand-tree', 'click-select'],
            },
            theme: {
                type: 'spec',
                specification: {
                    node: {
                        dataTypeField: 'cluster',
                    },
                },
            },
            node: (model) => {
                return {
                    id: model.id,
                    data: {
                        ...model.data,
                        type: 'rect-node',
                        // lodLevels: [],
                        keyShape: {
                            width: 50,
                            height: 20,
                        },
                        labelShape: {
                            text: model.id,
                            position: 'bottom',
                            maxWidth: '120%',
                            lod: Math.floor(Math.random() * 5 - 3),
                            fontSize: 8,
                        },
                        labelBackgroundShape: {},
                        anchorPoints:
                            model.data.layoutDirection === 'TB'
                                ? [
                                    [0.5, 0],
                                    [0.5, 1],
                                ]
                                : [
                                    [0, 0.5],
                                    [1, 0.5],
                                ],
                        animates: {
                            update: [
                                {
                                    fields: ['x', 'y'],
                                    duration: 500,
                                    shapeId: 'group',
                                    order: 0,
                                },
                                {
                                    fields: ['opacity'],
                                    duration: 500,
                                    shapeId: 'keyShape',
                                    order: 1,
                                },
                                {
                                    fields: ['opacity'],
                                    states: ['active', 'selected'],
                                    duration: 500,
                                    shapeId: 'haloShape',
                                },
                            ],
                        },
                    },
                };
            },
            edge: {
                type: 'cubic-horizontal-edge',
                keyShape: {
                    opacity: 0.5,
                    endArrow: true,
                },
            },
            layout: {
                type: 'compactBox',
                getHeight() {
                    return 20;
                },
                getWidth() {
                    return 50;
                },
                getVGap() {
                    return 10;
                },
                getHGap() {
                    return 30;
                },
            },
            edgeState: {
                active: {
                    lineWidth: 3,
                },
            },
        });

        graphRef.current = graph;

        // 加载数据
        fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
            .then((res) => res.json())
            .then((data) => {
                graph.once('afterlayout', () => {
                    graph.fitCenter();
                });
                graph.read({
                    type: 'treeData',
                    value: data,
                });
            });

        // 返回一个清理函数
        return () => {
            if (graphRef.current) {
                graphRef.current.destroy();
                graphRef.current = null;
}
        };

export default G6
    }, []);

    return <div ref={containerRef} style={{ width: '100%', height: '1000px' }} />;
};

export default G6;