IssueHuntantvis/G6
The issue has been closed
G6 V5 Use React #5700
RackweLLizm posted onGitHub
问题描述
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