antvis/G6


The issue has been closed
[Bug]: Node labels not visible when using React #6969
GabrieleMaurina posted onGitHub
Describe the bug / é®é¢ęčæ°
I am using React and I cannot get the labels to show.
Here is a minimal example that does not work:
import React, { useEffect, useRef } from "react";
import * as G6 from '@antv/g6';
const GraphComponent = () => {
const containerRef = useRef(null);
useEffect(() => {
if (!containerRef.current) return;
const graph = new G6.Graph({
container: containerRef.current,
width: 600,
height: 400,
node: {
size: 30,
style: {
fill: "#40a9ff",
stroke: "#1890ff",
},
labelCfg: {
style: {
fill: "#fff",
fontSize: 12,
},
},
},
edge: {
style: {
stroke: "#999",
lineWidth: 2,
},
},
modes: {
default: ["drag-canvas", "zoom-canvas", "drag-node"],
},
layout: {
type: "circular",
radius: 100,
},
});
const data = {
nodes: [
{ id: "node1", label: "Node 1" },
{ id: "node2", label: "Node 2" },
],
edges: [{ source: "node1", target: "node2" }],
};
graph.setData(data);
graph.render();
return () => graph.destroy();
}, []);
return <div ref={containerRef} />;
};
export default GraphComponent;
In this example the graph appears, but with no labels.
I am using "@antv/g6": "^5.0.44",
Reproduction link / å¤ē°é¾ę„
No response
Steps to Reproduce the Bug or Issue / éē°ę„éŖ¤
Place the component declared above in your React App.
Version / ēę¬
š 5.x
OS / ęä½ē³»ē»
- macOS
- Windows
- Linux
- Others / å ¶ä»
Browser / ęµč§åØ
- Chrome
- Edge
- Firefox
- Safari (Limited support / ęéęÆę)
- IE (Nonsupport / äøęÆę)
- Others / å ¶ä»