Graphin

Quick To Use

The usage of the network graph layout is very simple, just specify <Graphin layout={{type:"xxx"}} />. You can start with the following code ~

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

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

export default () => {
  return <Graphin data={data} layout={{ type: 'grid' }}></Graphin>;
};

Layout Preview

The following are the 10 built-in network graph layouts of Graphin based on the G6 layout, sorted by the frequency of usage scenarios as follows.

Note ⚠️: The following data are all from the same data, so the difference between some layouts may not be so big. In a real business scenario, the effect of matching the data with a suitable layout will be obvious. At the same time, for the convenience of browsing, the zoom function of the canvas is cancelled. , You can click on the icon </> at the bottom right corner to expand and view the detailed code.