antvis/G6

[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.

Image

I am using "@antv/g6": "^5.0.44",

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 / 其他

Please check the v5 website

posted by yvonneyx 20 days ago

Thank you!

I have added the following:

node: {
    style: {
      labelText:"some label"
      ...

Now it works!

posted by GabrieleMaurina 20 days ago

Fund this Issue

$0.00
Funded

Pull requests