A React toolkit for graph analysis based on G6
Graphin standardizes the visual mapping of graph elements. A Graphin's built-in node contains 5 parts: keyshape, label, halo, icon, and badges, each part can be driven by data. The built-in edges include three parts: keyshape, label, and halo. There are also corresponding style configurations for commonly used features, such as label backgrounds, self-loops, polygons, and dashed lines, etc. Try it online
Graphin has 10 built-in network graph layouts and 4 tree graph layouts to meet your needs of layout for different data types and different analysis scenarios. For features in complex business scenarios, such as layout switching, dynamic layouts, sub-graph layouts, etc., can be easily realized through data-driven layout. Try it online
Graphin provides 13 interactive components, including canvas zooming, panning, brush selection, lasso select , automatic resize, and also element dragging, selection, hovering, highlighting, expanding and collapsing, etc., to meet your interactive needs for different analysis scenarios Try it online
Currently Graphin provides 7 analysis components: ContextMenu, Tooltip, MiniMap, Toolbar, FishEye, Hull, and Legend. 17+ analysis components will be provided in the future. Try it online
- Graphin icons use Proxy, the font icon may not be displayed correctly on some browsers that do not support Proxy syntax
- The Graphin rendering engine of Graphin is G6, which relies on the browser API and does not support SSR
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
|---|---|---|---|
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
If you are using React, then you can use Graphin as a normal React component.
It uses yarn to install dependencies in this article, while npm is also fine. The following commands install Graphin's core components @antv/graphin and analysis components @antv/graphin-components, and Graphin's official icon library @antv/graphin-icons
yarn add @antv/graphin@latest --save
yarn add @antv/graphin-components@latest --save
yarn add @antv/graphin-icons --saveimport React from 'react';
import Graphin from '@antv/graphin';
// mock data
const data = Utils.mock(10).circle().graphin();
export default () => {
return <Graphin data={data} />;
};import React from 'react';
import Graphin from '@antv/graphin';
import { MiniMap } from '@antv/graphin-components';
// mock data
const data = Utils.mock(10).circle().graphin();
export default () => {
return (
<Graphin data={data}>
<MiniMap />
</Graphin>
);
};import React from 'react';
import Graphin from '@antv/graphin';
import { MiniMap } from '@antv/graphin-components';
// Import icon resource files
import iconLoader from '@antv/graphin-icons';
import '@antv/graphin-icons/dist/index.css';
// mock data
const data = Utils.mock(10).circle().graphin();
// Register in Graphin
const { fontFamily, glyphs } = iconLoader();
const icons = Graphin.registerFontFamily(iconLoader);
// Use icons
data.nodes.forEach(node => {
node.style = {
icon: {
type: 'font', // Specify the icon to be Font type
fontFamily: fontFamily, // Specify FontFamily
value: icons.home, // Specify the value of the icon
},
};
});
export default () => {
return (
<Graphin data={data}>
<MiniMap />
</Graphin>
);
};If you are a user from Graphin1.x, this Upgrade Guide may help you. If you encounter upgrade problems, you can go to github issue section, and feel free to create issues if it's not already there.
If you want to run Graphin locally, you may wish to read this Contribution Guide. We hope more contributors can join our team to make Graphin better together.
You can scan the QR code to join graphin's group chat
