G6 V5 Use React

[RackweLLizm]

问题描述

I'm trying to use React 18 and G6 V5 together. I found an old example.
https://stackblitz.com/edit/react-ts-b4iajh?file=index.tsx
I wrote my own codes similar to this. But I couldn't get it to work. I would be glad if you could help me.

import { Graph } from '@antv/g6';
import React, { useEffect } from 'react'
type GraphData = {
 nodes: NodeModel[];
 edges: EdgeModel[];
};
type NodeModel = {
 id: string;
 data: {
 type?: string; // node type, e.g. circle-node, rect-node
 x?:number;
 y?: number;
 z?: number;
 parentId?: string; // parent combo's id
 label?: string; //label content
 anchorPoints?: number[][];
 badges?: {
 type: 'icon' | 'text';
 text:string;
 position: string;
 }[];
 icon?: {
 type: 'icon' | 'text';
 text?: string;
 img?: string;
 };
 [key: string]: unknown; // other properties
 };
};
type EdgeModel = {
 id: string;
 source: string;
 target: string;
 data: {
 type?: string; // edge type, e.g. line-edge
 label?: string; //label content
 sourceAnchor?: number;
 targetAnchor?: number;
 icon?: {
 type: 'icon' | 'text';
 text?: string;
 img?: string;
 };
 badge?: {
 type: 'icon' | 'text';
 text:string;
 };
 [key: string]: unknown; // other properties
 };
};
const G6V5 = () => {
 const ref = React.useRef(null);
 let graph = null;
 const data: GraphData = {
 nodes: [{
 id: "1",
 data: {
 label: "Test 1 Node",

 }
 },
 {
 id: "2",
 data: {
 label: "Test 2 Node",

 }
 }],
 edges: [{
 id: "1",
 source: "1",
 target: "2",
 data: {
 label: "Edge Test"
 }

 }]
 };
 useEffect(() => {
 if (!graph) {
 const graph = new Graph({
 data: data,
 container: ref.current as any,
 });
 graph.on('node:click', (e) => {
 // the clicked item's type and id
 console.log("Node Click", e);
 });
 // graph.render();
 }
 console.log("graph",graph);

 }, []);

 return <div ref={ref}></div>;
}

export default G6V5

重现链接

https://stackblitz.com/edit/react-ts-b4iajh?file=index.tsx

重现步骤

.

预期行为

I'm getting graph null error

平台

• 操作系统: [Windows.]
• 网页浏览器: [Google Chrome]
• G6 版本: [V5. ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[Aarebecca]

I noticed that the Demo you provided is not using G6 5.0 (but rather ^4.5.5). If you want to use the 4.x version in React, you can refer to g6-in-react (please note that the code might be outdated).

If you want to use the 5.x version in React, you can visit the latest Demo. Please note that the relevant documentation is expected to be updated on the official website by the end of this weekend.

[RackweLLizm]

I noticed that the Demo you provided is not using G6 5.0 (but rather ^4.5.5). If you want to use the 4.x version in React, you can refer to g6-in-react (please note that the code might be outdated).

If you want to use the 5.x version in React, you can visit the latest Demo. Please note that the relevant documentation is expected to be updated on the official website by the end of this weekend.

Yes, that's what I was looking for, it worked, thank you.

[RackweLLizm]

@Aarebecca

https://g6-next.antv.antgroup.com/en/examples/feature/features/#moreDataWebGL
When I try to implement the example in the link
import { Graph, Extensions, extend } from '@antv/g6';
'"@antv/g6"' has no exported member named 'Extensions'. Did you mean 'getExtensions'?ts(2724)
Module '"@antv/g6"' has no exported member 'extend'.ts(2305)

I'm getting the error. You said above that the examples will be updated. Do I have to wait a bit or is it my fault?

Package.Json:
"@antv/g6": "^5.0.0-beta.35",

[Aarebecca]

@RackweLLizm

The current official website provides incorrect examples, so please do not refer to the sample code provided there. We will prioritize updating the documentation and examples as soon as possible within this week. Thank you for your understanding and patience.

After the beta.28 version, G6 underwent a significant change. You can now use it in the following way:

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  width: 400,
  height: 400,
  data: {
    nodes: [{ id: 'node-1' }, { id: 'node-2' }],
    edges: [{ source: 'node-1', target: 'node-2' }],
  },
  behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
  layout: {
    type: 'grid',
  },
});

graph.render();

The use of extend to add extensions has been deprecated, and instead, a register method similar to that in version 4.x is now adopted. Currently, all plugins are registered by default, but after future adjustments, you may need to register them in the following way:

import { register, ExtensionCategory, Donut } from '@antv/g6';

register(ExtensionCategory.NODE, 'donut', Donut);

[hustcc]

You can use G6 in react with this package. https://www.npmjs.com/package/react-g6