From f72591f60b2428db2b1b0f384f8c2df005fba538 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期四, 25 一月 2024 16:03:01 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/G6.jsx | 162 ++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 152 insertions(+), 10 deletions(-)
diff --git a/zy-asrs-flow/src/pages/G6.jsx b/zy-asrs-flow/src/pages/G6.jsx
index 96102fc..e321240 100644
--- a/zy-asrs-flow/src/pages/G6.jsx
+++ b/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;
-export default G6
+ 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;
+ }
+ };
+
+ }, []);
+
+ return <div ref={containerRef} style={{ width: '100%', height: '1000px' }} />;
+};
+
+export default G6;
\ No newline at end of file
--
Gitblit v1.9.1