3.0.2 • Published 12 months ago

@antv/graphin v3.0.2

Weekly downloads
768
License
MIT
Repository
github
Last release
12 months ago

English | 简体中文

A lightweight 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

PropertyDescriptionTypeDefault
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

Creating Graph

更多创建图表的示例,请参见 G6 示例

import React from 'react';
import { Graphin } from '@antv/graphin';

export function Demo() {
  return (
    <Graphin
      options={{
        autoResize: true,
        data: {
          nodes: [
            { id: 'node-1', style: { x: 50, y: 100 } },
            { id: 'node-2', style: { x: 150, y: 100 } },
          ],
          edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
        },
        behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
      }}
    />
  );
}

Fetching Data

获取远程数据并在数据更新时重新渲染图表。

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 <p>Loading...</p>;

  return <Graphin options={options} />;
}

Handling Events

<Graphin /> 暴露了 ref 用于获取图实例,以便处理事件或获取实例属性。

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 <Graphin ref={graphRef} onInit={onInit} />;
}

Styling Container

给图画布容器添加 css 样式:

import React from 'react';
import { Graphin } from '@antv/graphin';

export function Demo() {
  // ...
  return (
    <Graphin
      className="my-graphin-container"
      style={{
        width: 600,
        height: 600,
        background: '#eee',
        padding: '1em',
        borderRadius: '0.5em',
      }}
    />
  );
}

Using hooks

使用 useGraphin() 来方便地访问图实例和其状态。

import React from 'react';
import { Graphin, useGraphin } from '@antv/g6'';

const CustomComponent = () => {
  const { graph, isReady } = useGraphin();

  return <>{!isReady ? <p>Loading...</p> : <div className="graphin-component"></div>}</>;
};

export function Demo() {
  // ...
  return (
    <Graphin>
      <CustomComponent />
    </Graphin>
  );
}

📮 贡献

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

📄 License

MIT.

3.0.0-alpha.1

1 year ago

3.0.0-beta.1

1 year ago

3.0.0-beta.2

1 year ago

3.0.2

12 months ago

3.0.1

12 months ago

3.0.0

12 months ago

2.7.27

2 years ago

2.7.22

2 years ago

2.7.21

2 years ago

2.7.20

2 years ago

2.7.26

2 years ago

2.7.25

2 years ago

2.7.24

2 years ago

2.7.23

2 years ago

2.7.19

2 years ago

2.7.18

2 years ago

2.7.17

2 years ago

2.7.16

2 years ago

2.7.15

2 years ago

2.7.14

2 years ago

2.7.13-beta.1

2 years ago

2.7.17-beta.0

2 years ago

2.7.13

3 years ago

2.7.11

3 years ago

2.7.12

3 years ago

2.7.10

3 years ago

2.7.4

3 years ago

2.7.6

3 years ago

2.7.5

3 years ago

2.7.8

3 years ago

2.7.7

3 years ago

2.7.9

3 years ago

2.7.3-beta.0

3 years ago

2.7.0

3 years ago

2.7.2

3 years ago

2.7.1

3 years ago

2.7.3-beta.1

3 years ago

2.7.2-beta.1

3 years ago

2.7.3

3 years ago

2.6.7

3 years ago

2.6.6

3 years ago

2.6.1

3 years ago

2.6.0

3 years ago

2.6.3

3 years ago

2.6.2

3 years ago

2.5.2

3 years ago

2.5.1

3 years ago

2.6.5

3 years ago

2.6.4

3 years ago

2.5.0-beta.4

3 years ago

2.5.0

3 years ago

2.4.14

3 years ago

2.4.13

3 years ago

2.4.15

3 years ago

2.4.10

4 years ago

2.4.12

3 years ago

2.4.11

3 years ago

2.4.7

4 years ago

2.4.9

4 years ago

2.4.8

4 years ago

2.5.0-beta.0

3 years ago

2.5.0-beta.1

3 years ago

2.5.0-beta.2

3 years ago

2.5.0-beta.3

3 years ago

2.4.5

4 years ago

2.4.4

4 years ago

2.4.6

4 years ago

2.4.3

4 years ago

2.4.1

4 years ago

2.4.2

4 years ago

2.4.0

4 years ago

2.3.8

4 years ago

2.3.7

4 years ago

1.6.9

4 years ago

1.6.8

4 years ago

2.3.6

4 years ago

2.3.5

4 years ago

2.3.4

4 years ago

2.3.2

4 years ago

2.3.3

4 years ago

2.3.0

4 years ago

2.3.1

4 years ago

2.2.1

4 years ago

1.6.7

4 years ago

1.6.6

4 years ago

1.6.5

4 years ago

2.2.0

4 years ago

2.1.0

4 years ago

2.0.7

4 years ago

2.0.6

4 years ago

2.0.5

4 years ago

2.0.4

4 years ago

2.0.3

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

2.0.0-beta.15

4 years ago

2.0.0-beta.14

4 years ago

2.0.0-beta.13

4 years ago

2.0.0-beta.12

4 years ago

2.0.0-beta.11

4 years ago

2.0.0-beta.10

4 years ago

2.0.0-beta.9

4 years ago

2.0.0-beta.8

4 years ago

2.0.0-beta.7

4 years ago

2.0.0-beta.6

4 years ago

1.6.4

4 years ago

2.0.0-beta.5

4 years ago

2.0.0-beta.4

4 years ago

2.0.0-beta.3

4 years ago

2.0.0-beta.2

5 years ago

2.0.0-beta.1

5 years ago

1.6.3

5 years ago

1.6.2

5 years ago

1.6.1

5 years ago

1.6.0

5 years ago

1.5.0

5 years ago

1.5.0-beta.0

5 years ago

1.4.5

5 years ago

1.4.4

5 years ago

1.4.3

5 years ago

1.4.2

5 years ago

1.4.1

5 years ago

1.4.0

5 years ago

1.3.0

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.0

5 years ago

1.1.0-beta.2

5 years ago

1.1.0-beta.1

5 years ago

1.0.6-beta

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

1.0.0-beta.12

6 years ago

1.0.0-beta.11

6 years ago

1.0.0-beta.10

6 years ago

1.0.0-beta.9

6 years ago

1.0.0-beta.8

6 years ago

1.0.0-beta.7

6 years ago

1.0.0-beta.5

6 years ago

1.0.0-beta.4

6 years ago

1.0.0-beta.3

6 years ago

1.0.0-beta.2

6 years ago

1.0.0-beta.1

6 years ago