The Graphin recommended in this issue is named Graph Insight, which is a G6-wrapped React component library. It is a one-stop face recognition research platform open source of JD.com – FaceX-Zoo.
Features
High-value elements, standardized style configuration
Graphin normalizes the visual mapping of graph elements. A built-in Graphin node contains 5 parts: containers, labels, halos, icons, and logos, each of which can be data-driven. The built-in edges include three parts: path, label, and halo, and there are also responsive data style configurations for commonly used label backgrounds, self-loops, multilaterals, and dashed lines.
Automatic layout to easily cope with complex scenes
Graphin has 10 built-in network diagram layouts and 4 tree diagram layouts to meet your layout needs for different data types and different analysis scenarios. For complex business scenarios, layout switching, dynamic layout, subgraph layout, etc., can be easily achieved through data-driven layout
Delicate interactions, easy to customize
Graphin offers 13 interactions. Including canvas zoom, pan, circle selection, zip, automatic Resize, as well as dragging, selecting, hovering, highlighting, expanding and folding elements to meet your interactive needs for different analysis scenarios.
A comfortable development experience that fits the minds of React users
use
Use the Graphin canvas component
import React from ‘react’;
import Graphin from ‘@antv/graphin’;
mock data
const data = Utils.mock(10).circle().graphin();
export default () => {
return <Graphin data={data} />;
};
Use Graphin to analyze components
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>
);
};
Use the Graphin font icon
import React from ‘react’;
import Graphin from ‘@antv/graphin’;
import { MiniMap } from ‘@antv/graphin-components’;
Introducing 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 into Graphin
const { fontFamily, glyphs } = iconLoader();
const icons = Graphin.registerFontFamily(iconLoader);
Use icons
data.nodes.forEach(node => {
node.style = {
icon: {
type: ‘font’, // Specifies that the icon is of font type
fontFamily: fontFamily, // Specify FontFamily
value: icons.home, // Specifies the value of the icon
},
};
});
export default () => {
return (
<Graphin data={data}>
<MiniMap />
</Graphin>
);
};
Installation
Install dependencies
If you’re a web developer using React, you can use Graphin as a normal React component.
yarn add @antv/graphin@latest –save
yarn add @antv/graphin-components@latest –save
yarn add @antv/graphin-icons –save
Visualize relational data
The first step in completing a graph analytics product is to visualize relational data. Relational data is a very typical graph structure consisting of nodes and edges. Only id is a required parameter in Node, and only source and target are required parameters in Edge, which represent the ids of the start node and end node of the edge, respectively
Graphin-specific layout
The layout of Graphin 2.0 fully embraces G6, please refer to it for details. However, Graphin also has 2 built-in layouts, graphin-force and preset
Graphin-Force is a force conductance layout algorithm based on the charge spring model, with a built-in Tweak algorithm inside, which can realize the incremental layout of force conductance
Preset is a preset layout as the name suggests, and when the user sets this layout, the Graphin will be internally laid out according to the coordinate information (x,y) in the data nodes given by the user. This layout is useful when you need a layout caching strategy in your business, or when you want to save the canvas and re-enter it.
