English | 简体中文
A lighteight React toolkit for graph analysis based on G6.
- 🎨 轻量级:不做过度封装,尽量保持 G6 能力同步,尽量不新增概念,整体核心代码 <200 行。
- 🎗️ React 风格:舒心的开发体验,符合 React 用户心智,基于 React 扩展组件更容易。
- 🚀 丰富组件:丰富的组件,源于业务沉淀,让用户定制自己的图应用更快更容易。
把 graphin
当作一个普通的 React 组件来使用即可,通过 NPM 或 Yarn 等包管理器来安装。
$ npm install @antv/graphin
$ yarn add @antv/graphin
成功安装之后,可以通过 import 导入 Graphin
组件。
import React from 'react';
import { Graphin } from '@antv/graphin';
export function Demo() {
return (
<Graphin
id="my-graphin-demo"
className="my-graphin-container"
style={{ width: '100%', height: '100%' }}
options={{
data,
node: {
style: {
labelText: (d) => d.id,
},
palette: {
type: 'group',
field: 'cluster',
},
},
layout: {
type: 'd3force',
collide: {
strength: 0.5,
},
},
behaviors: ['zoom-canvas', 'drag-canvas'],
animation: true,
}}
>
</Graphin>
/>
);
}
Property | Description | Type | Default |
---|---|---|---|
id | 设置图画布容器的 id 属性。 | string |
- |
className | 设置图画布容器的 class 属性。 | string |
- |
style | 设置图画布容器的 style 样式属性。 | CSSProperties |
- |
options | 设置图画布的配置项,参考 G6 配置 文档,在 graph.setOptions(options) 中调用 |
GraphOptions | null |
- |
onInit | 当图实例初始化之后调用,在 new Graph() 之后。 |
(graph: Graph) => void |
- |
onReady | 当图实例渲染完成之后调用,在 graph.render() 之后。 |
(graph: Graph) => void |
- |
onDestroy | 当图实例被销毁的时候调用,在 graph.destroy() 之后。 |
() => {} |
- |
- 问题反馈:使用过程遇到的
graphin
的问题,欢迎提交 Issue,并附上可以复现问题的最小案例代码。 - 贡献指南:如何参与到
graphin
的开发和贡献。 - 想法讨论:在 GitHub Discussion 上或者钉钉群里面讨论。
MIT.