Skip to content

antvis/Graphin

Repository files navigation

English | 简体中文

Graphin

A lighteight React toolkit for graph analysis based on G6.

Version NPM downloads Latest commit

✨ 功能特性

  • 🎨 轻量级:不做过度封装,尽量保持 G6 能力同步,尽量不新增概念,整体核心代码 <200 行。
  • 🎗️ React 风格:舒心的开发体验,符合 React 用户心智,基于 React 扩展组件更容易。
  • 🚀 丰富组件:丰富的组件,源于业务沉淀,让用户定制自己的图应用更快更容易。

component

🔨 快速使用

把 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>
    />
  );
}

📖 API Reference

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() 之后。 () => {} -

🗂 Examples

📮 贡献

  • 问题反馈:使用过程遇到的 graphin 的问题,欢迎提交 Issue,并附上可以复现问题的最小案例代码。
  • 贡献指南:如何参与到 graphin 的开发和贡献。
  • 想法讨论:在 GitHub Discussion 上或者钉钉群里面讨论。

📄 License

MIT.