English | [简体中文](./README.md)
Graphin
A lightweight React toolkit for graph analysis based on [G6](https://github.com/antvis/G6).
[](https://www.npmjs.com/@antv/graphin)
[](http://npmjs.com/@antv/graphin)
## ✨ Features
- 🎨 **Lightweight**: Avoid excessive encapsulation, strive to keep in sync with G6 capabilities, minimize the introduction of new concepts, with the core code <200 lines.
- 🎗️ **React Style**: Comfortable development experience, aligns with the mindset of React users, making it easier to extend components based on React.
- 🚀 **Rich Components**: Offers a rich set of components, derived from business experiences, making it faster and easier for users to customize their graph applications.
## 🔨 Installing
You can use `graphin` as a normal React component, installing it through package managers like NPM or Yarn.
```bash
$ npm install @antv/graphin
```
```bash
$ yarn add @antv/graphin
```
After successful installation, you can import the `Graphin` component.
```jsx
import React from 'react';
import { Graphin } from '@antv/graphin';
export function Demo() {
return (
d.id,
},
palette: {
type: 'group',
field: 'cluster',
},
},
layout: {
type: 'd3force',
collide: {
strength: 0.5,
},
},
behaviors: ['zoom-canvas', 'drag-canvas'],
animation: true,
}}
>
);
}
```
## 📖 API Reference
| Property | Description | Type | Default |
| --------- | --------------------------------------------------------------------------------------------------- | -------------------------- | ------- |
| id | the id of container div. | `string` | - |
| className | the class name of container div. | `string` | - |
| style | the style of the container | `CSSProperties` | - |
| options | the [options](https://g6.antv.antgroup.com/) for the visualization, say `graph.setOptions(options)` | `GraphOptions` \| `null` | - |
| onInit | Callback for when the graph is initialized, after new Graph(). | `(graph: G6Graph) => void` | - |
| onReady | Callback for when the graph is ready, after graph.render(). | `(graph: G6Graph) => void` | - |
| onDestroy | Callback for when the graph is destroyed, after graph.destroy(). | `() => {}` | - |
## 🗂 Examples
- [Creating Graph](#creating-graph)
- [Fetching Data](#updating-data)
- [Handling Events](#handling-events)
- [Styling Container](#styling-container)
- [Using hooks](#using-hooks)
### Creating Graph
More examples of creating graph, please see [G6 Demo](https://g6-next.antv.antgroup.com/examples).
```jsx
import React from 'react';
import { Graphin } from '@antv/graphin';
export function Demo() {
return (
);
}
```
### Fetching Data
Fetch remote data and re-render the graph upon data update.
```jsx
import React, { useEffect, useMemo, useState } from 'react';
import { Graphin } from '@antv/graphin';
export function Demo() {
const [data, setData] = useState(undefined);
useEffect(() => {
fetch('https://assets.antv.antgroup.com/g6/graph.json')
.then((res) => res.json())
.then((data) => setData(data));
}, []);
// The options will update when the data changes
const options = useMemo(
() => ({
autoResize: true,
data,
layout: { type: 'd3-force' },
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
}),
[data],
);
if (!data) return Loading...
;
return ;
}
```
### Handing Events
`` exposes a ref for the G6 [graph instance](https://g6-next.antv.antgroup.com/manual/core-concept/graph), which can be used to handle events or retrieving instance properties.
```jsx
import React, { useEffect, useRef } from 'react';
import { Graphin } from '@antv/graphin';
import { GraphEvent, NodeEvent } from '@antv/g6';
export function Demo() {
const graphRef = useRef();
const onInit = () => {
const graph = graphRef.current;
// Listen input events.
graph.on(NodeEvent.CLICK, (event) => {});
// Listen to lifecycle events.
graph.on(GraphEvent.AFTER_RENDER, (event) => {
// Simulate a click event on a node.
graph.emit(NodeEvent.CLICK, { target: { id: 'node-1' }, targetType: 'node' });
});
};
return ;
}
```
### Styling Container
Define the css styles of the container:
```jsx
import React from 'react';
import { Graphin } from '@antv/graphin';
export function Demo() {
// ...
return (
);
}
```
### Using hooks
Using `useGraphin()` to access the graph instance and its state for more convenient use of graph components.
```jsx
import React from 'react';
import { Graphin, useGraphin } from '@antv/graphin';
const CustomComponent = () => {
const { graph, isReady } = useGraphin();
return <>{!isReady ? Loading...
: };
};
export function Demo() {
// ...
return (
);
}
```