G6 If I don’t use the default graphics, really uncomfortable, I just need “billion dots” addShape, data binding and so on? It doesn’t exist.

The result is the @ANTv/g6-React-Node library, which makes developing custom nodes as easy as developing react components. We support automatic layouts like Flex layouts, and we define events at shape level, so if you know how to use React, you can write G6 custom nodes. It also supports component-level reuse of graphical elements, making it easier for you to develop graphical elements.

The installation

npm install --save @antv/g6-react-node
# or
yarn add @antv/g6-react-node
Copy the code

Recommended for use with G6 4+, but this plug-in is compatible with G6 3. X version.

Define nodes with React

1. Define the node keyshape and add the shadow

For all React defined nodes, we recommend wrapping a Group as the root node. First we define the main graph (keyshape) for this node.

<Group>
      <Rect
        style={{
          radius: [8].fill: '#fff',
          shadowColor: '#ddd',
          shadowBlur: 8.shadowOffsetX: 2.shadowOffsetY: 2,}}keyshape
        draggable
      />
    </Group>
Copy the code

Use G gradient method to add a title area to the node

Let’s build on the previous step and redefine a header with a gradient. There are a few flex layout tips, using direction to make the elements change the way they are arranged, and using empty elements in Flex attributes to make the sides better aligned left and right.

<Group>
    <Rect
      style={{
        radius: [8].fill: '#fff',
        shadowColor: '#ddd',
        shadowBlur: 8.shadowOffsetX: 2.shadowOffsetY: 2,}}keyshape
      draggable
    >
      <Rect
        style={{
          minWidth: 200.fill: 'l(0) Zero:#0049FF 1:#0EB7FF', / / useGThe gradient definition offill
          radius: [8.8.0.0].padding: 12.flexDirection: 'row',// The internal elements are arranged horizontallycursor: 'pointer',
          alignContent: 'center'}} >
        <Text style={{ fill: '#fff' }}>Data entry node - Log source</Text>
        <Group style={{ flex: 1}} / >// Use Flex 1's empty Group to align the two elements<Circle
          style={{
            r: 5.fill: '#00CF10'}} / >
      </Rect>
    </Rect>
  </Group>
Copy the code

Third, add node values in the remaining area for detailed information

If you need information about different nodes, you can use the CFG, which is the model data of the node itself, and you can use it to display information and even control the rendering details.

const Card = ({ cfg }) = > {
  return (
    <Group>
      <Rect
        style={{
          radius: [8].fill: '#fff',
          shadowColor: '#ddd',
          shadowBlur: 8.shadowOffsetX: 2.shadowOffsetY: 2,}}keyshape
        draggable
      >
        <Rect
          style={{
            minWidth: 200.fill: 'l(0) Zero:#0049FF 1:#0EB7FF',
            radius: [8.8.0.0].padding: 12.flexDirection: 'row',
            cursor: 'pointer',
            alignContent: 'center'}} >
          <Text style={{ fill: '#fff' }}>Data entry node - Log source</Text>
          <Group style={{ flex: 1}} / >
          <Circle
            style={{
              r: 5.fill: '#00CF10'}} / >
        </Rect>
        <Group style={{ flexDirection: 'row', margin: [6.12] }}>
          <Text style={{ fill: '#222', fontWeight: 'bold' }}>The node ID</Text>
          <Text style={{ fill: '#000', margin: [0.4] }}>{cfg? .id}</Text>
        </Group>
        <Group style={{ flexDirection: 'row', margin: [6.12] }}>
          <Text style={{ fill: '#222', fontWeight: 'bold' }}>Source of a log</Text>
          <Text style={{ fill: '#000', margin: [0.4] }}>Click the buried point data source</Text>
        </Group>
      </Rect>
    </Group>
  );
};
Copy the code

Define components to make development smoother

We support nested logic for most components, so that you can bind some of the same visual elements together, greatly reducing duplication of development. Here we define a Button component to define the Button component.

const Button = ({ color = '#2D5AF6', children, onClick }) = > (
  <Rect
    onClick={onClick}
    style={{
      padding: [4.8].fill: color.margin: [0.4].radius: 4.cursor: 'pointer'}} >
    <Text style={{ fill: '#fff', cursor: 'pointer'}}onClick={onClick}>
      {children}
    </Text>
  </Rect>
);

const Card = ({ cfg }) = > {
  return (
    <Group>
      <Rect
        style={{
          radius: [8].fill: '#fff',
          shadowColor: '#ddd',
          shadowBlur: 8.shadowOffsetX: 2.shadowOffsetY: 2,}}keyshape
        draggable
      >
        <Rect
          style={{
            minWidth: 200.fill: 'l(0) Zero:#0049FF 1:#0EB7FF',
            radius: [8.8.0.0].padding: 12.flexDirection: 'row',
            cursor: 'pointer',
            alignContent: 'center'}} >
          <Text style={{ fill: '#fff' }}>Data entry node - Log source</Text>
          <Group style={{ flex: 1}} / >
          <Circle
            style={{
              r: 5.fill: '#00CF10'}} / >
        </Rect>
        <Group style={{ flexDirection: 'row', margin: [6.12] }}>
          <Text style={{ fill: '#222', fontWeight: 'bold' }}>The node ID</Text>
          <Text style={{ fill: '#000', margin: [0.4] }}>{cfg? .id}</Text>
        </Group>
        <Group style={{ flexDirection: 'row', margin: [6.12] }}>
          <Text style={{ fill: '#222', fontWeight: 'bold' }}>Source of a log</Text>
          <Text style={{ fill: '#000', margin: [0.4] }}>Click the buried point data source</Text>
        </Group>
        <Group style={{ flexDirection: 'row', margin: [6.12] }}>
          <Button>details</Button>
          <Button color="#FF1313">stop</Button>
        </Group>
      </Rect>
    </Group>
  );
};
Copy the code

Event binding on components

We have encapsulated most events of G6 independently, and we can define event trigger based on shape, which is convenient and more intuitive to manage events.

        <Group style={{ flexDirection: 'row'.margin: [6.12] }}>
          <Button
            onClick={()= >{alert(' you clicked on ${cfg.id} for details'); }} > for details</Button>
          <Button
            onClick={()= >{alert(' you clicked on ${cfg.id} to stop '); }} color="#FF1313"</Button>
        </Group>

Copy the code

Nodes defined using React in G6

When you have defined a node using React, you can register the custom node using G6

import React from 'react';
import G6 from '@antv/g6';
import {
  Rect,
  Text,
  Circle,
  Image,
  Group,
  createNodeFromReact,
  appenAutoShapeListener,
} from '@antv/g6-react-node';

const Button = ({ color = '#2D5AF6', children, onClick }) = > (
  <Rect
    onClick={onClick}
    style={{
      padding: [4.8].fill: color.margin: [0.4].radius: 4.cursor: 'pointer'}} >
    <Text style={{ fill: '#fff', cursor: 'pointer'}}onClick={onClick}>
      {children}
    </Text>
  </Rect>
);

const Card = ({ cfg }) = > {
  return (
    <Group>
      <Rect
        style={{
          radius: [8].fill: '#fff',
          shadowColor: '#ddd',
          shadowBlur: 8.shadowOffsetX: 2.shadowOffsetY: 2,}}keyshape
        draggable
      >
        <Rect
          style={{
            minWidth: 200.fill: 'l(0) Zero:#0049FF 1:#0EB7FF',
            radius: [8.8.0.0].padding: 12.flexDirection: 'row',
            cursor: 'pointer',
            alignContent: 'center'}} >
          <Text style={{ fill: '#fff' }}>Data entry node - Log source</Text>
          <Group style={{ flex: 1}} / >
          <Circle
            style={{
              r: 5.fill: '#00CF10'}} / >
        </Rect>
        <Group style={{ flexDirection: 'row', margin: [6.12] }}>
          <Text style={{ fill: '#222', fontWeight: 'bold' }}>The node ID</Text>
          <Text style={{ fill: '#000', margin: [0.4] }}>{cfg.id}</Text>
        </Group>
        <Group style={{ flexDirection: 'row', margin: [6.12] }}>
          <Text style={{ fill: '#222', fontWeight: 'bold' }}>Source of a log</Text>
          <Text style={{ fill: '#000', margin: [0.4] }}>Click the buried point data source</Text>
        </Group>
        <Group style={{ flexDirection: 'row', margin: [6.12] }}>
          <Button
            onClick={()= >{alert(' you clicked on ${cfg.id} for details'); }} > for details</Button>
          <Button
            onClick={()= >{alert(' you clicked on ${cfg.id} to stop '); }} color="#FF1313"</Button>
        </Group>
      </Rect>
    </Group>
  );
};

G6.registerNode('test', createNodeFromReact(Card));

// Once you've created the Graph, if you need to use the events defined within the node

appenAutoShapeListener(graph)

Copy the code