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