Graphin

Basic Usage

The interaction behaviors in Graphin are all composable, such as the built-in DragCavans, ZoomCanvas, and SelectClick components. Because the interactions are all asynchronous, the components implement the atomic operations of addBehaviors and removeBehaviors. The default interaction behavior is available out of the box and can be imported on demand via import {Behaviors} from'@antv/graphin'.

The Props API of each interactive component is completely consistent with G6's defaultBehaviors. You can view it in the documents of Node Interaction and Canvas Interaction

import React from 'react';
import Graphin, { Utils, Behaviors } from '@antv/graphin';

const data = Utils.mock(10)
  .random()
  .graphin();

const { DragCanvas, ZoomCanvas, DragNode, ActivateRelations } = Behaviors;

export default () => {
  return (
    <div>
      <Graphin data={data}>
        <ZoomCanvas enableOptimize />
        <DragNode disabled />
      </Graphin>
    </div>
  );
};

Typescript Friendly

Built-in Interactive Behavior

Not all interactive behaviors need to be manually introduced by the user. Therefore, Graphin has 9 built-in interactive behaviors. We consider these interactive behaviors to be the basic interaction requirements of graph analysis products, so we choose to build them.

<>
  {/* drag the canvas */}<DragCanvas />
  {/* zoom the canvas */}<ZoomCanvas />
  {/* drag node */}<DragNode />
  {/* drag combo */}<DragCombo />
  {/* click node */}<ClickSelect />
  {/* brush select nodes */}<BrushSelect />
  {/** resize canvas */}<ResizeCanvas graphDOM={this.graphDOM as HTMLDivElement} />
  {/** hovering node**/}<Hoverable bindType="node" />
</>

Disable The default interactive behavior

The built-in interactive component is a singleton mode. Therefore, we only need to import the interactive components that need again, and then manually set it to disabled. As in the example below, turn off the default canvas zoom and node dragging behaviors

The optional interactive behavior

For non-high-frequency interactive behaviors, Graphin encapsulates these for users to introduce on demand. Tips 💡: Click to jump to the corresponding document to see more

• Association highlighting interaction: <ActivateRelations />
• Fitview viewpoint interaction: <FitView />
• Font loading rendering: <FontPaint />
• Tree graph expand and collapse: <TreeCollapse />