react-g6

The lightweight React component for @antv/g6 5.0.

Installing

$ npm install react-g6

import React from 'react';
import { Graph } from 'react-g6';

export function Demo() {
  return (
    <Graph
      options={{
        data,
        node: {
          style: {
            labelText: (d) => d.id,
            ports: [],
          },
          palette: {
            type: 'group',
            field: 'cluster',
          },
        },
        layout: {
          type: 'd3force',
          collide: {
            strength: 0.5,
          },
        },
        behaviors: ['zoom-canvas', 'drag-canvas'],
        animation: true,
      }}
    />
  );
}

API Reference

| Property | Description | Type | Default | | -------- | --------------------------------------------------------------------------------------------------------------- | ------------------------ | ------- | | className| the class name of container div. | string | - | | options | the options for the visualization, say graph.setOptions(options) | GraphOptions | null | - | | style | the style of the container | CSSProperties | - | | onReady | the callback called after the chart is ready | (graph: G6Graph) => {} | - | | ref | the ref for the graph instance | GraphRef | - |

Examples

• Creating Graph
• Fetching Data
• Handling Events
• Customizing Component
• Styling Container

Creating Graph

For more examples for props.options, see each G6 example.

import React from 'react';
import { Graph } from 'react-g6';

export function Demo() {
  return (
    <Graph
      options={{

      }}
    />
  );
}

Updating Data

Using useMemo to define a computed options with data as a decency, this allows rerendering graph after the data updating.

import React, { useState, useEffect } from 'react';
import { Graph } from 'react-g6';

export function Demo() {
  const [data, setData] = useState();

  useEffect(() => {
    fetch('https://......')
      .then((res) => res.json())
      .then((data) => {
        setDate(data);
      });
  }, []);

  return (
    <Chart
      options={{
        data,
        /* ... */
      }}
    />
  );
}

Handling Events

<Graph/> exposes the ref for the G6 graph instance, which can be used to handle events or get some instances, such as nodes, edges, etc.

import React, { useRef, useEffect } from 'react';
import { NodeEvent } from '@antv/g6';
import { Graph } from 'react-g6';

export function Demo() {
  const chartRef = useRef();

  function onReady() {
    const graph = chartRef.current;

    graph.on(`node:${NodeEvent.CLICK}`, () => {
      // do something.
    });
  }

  return <Graph ref={chartRef} onReady={onReady} />;
}

Customizing Component

With the register API of G6, you can customize visual component and using it in options, such as customizing a image node.

import React from 'react';
import { register, ExtensionCategory } from '@antv/g6';
import { ReactNode } from '@antv/g6-extension-react';
import { Graph } from 'react-g6';

register(ExtensionCategory.NODE, 'react', ReactNode);

export function Demo() {
  return (
    <Graph
      options={{
        /* ... */
        node: {
          type: 'react',
          style: {
            size: [240, 100],
            component: (data) => <MyNode data={data} />,
          },
        },
      }}
    />
  );
}

Styling Container

Define the css styles of the container:

import React from 'react';
import { Chart } from 'react-g6';

export function Demo() {
  // ...
  return (
    <Chart
      options={{ /* ... */ }}
      style={{
        width: 800,
        height: 600,
        background: '#eee',
        padding: '1em',
        borderRadius: '0.5em',
      }}
    />
  );
}

License

ISC@hustcc.