GGEditor

基于 G6 和 React 的可视化图形编辑器。「A visual graph editor based on G6 and React」

Github星跟蹤圖

English | 简体中文

基于 G6React 的可视化图编辑器

GitHub
npm
npm

安装

npm

npm install gg-editor --save

umd

<script src="https://unpkg.com/gg-editor@${version}/dist/index.js"></script>

使用

流程图

Edit GGEditor - Flow

import GGEditor, { Flow } from 'gg-editor';

const data = {
  nodes: [
    {
      id: '0',
      label: 'Node',
      x: 55,
      y: 55,
    },
    {
      id: '1',
      label: 'Node',
      x: 55,
      y: 255,
    },
  ],
  edges: [
    {
      label: 'Label',
      source: '0',
      target: '1',
    },
  ],
};

<GGEditor>
  <Flow style={{ width: 500, height: 500 }} data={data} />
</GGEditor>;

脑图

Edit GGEditor - Mind

import GGEditor, { Mind } from 'gg-editor';

const data = {
  label: 'Central Topic',
  children: [
    {
      label: 'Main Topic 1',
    },
    {
      label: 'Main Topic 2',
    },
    {
      label: 'Main Topic 3',
    },
  ],
};

<GGEditor>
  <Mind style={{ width: 500, height: 500 }} data={data} />
</GGEditor>;

示例

# 克隆仓库
$ git clone https://github.com/alibaba/GGEditor.git

# 切换目录
$ cd gg-editor

# 安装依赖
$ npm install

# 运行示例
$ npm start

主要指標

概覽
名稱與所有者alibaba/GGEditor
主編程語言TypeScript
編程語言JavaScript (語言數: 2)
平台Web browsers
許可證MIT License
所有者活动
創建於2018-08-24 05:50:30
推送於2020-09-10 10:08:53
最后一次提交2020-07-10 18:33:23
發布數35
最新版本名稱3.1.3 (發布於 )
第一版名稱1.1.1 (發布於 )
用户参与
星數3.4k
關注者數75
派生數572
提交數405
已啟用問題?
問題數0
打開的問題數0
拉請求數102
打開的拉請求數7
關閉的拉請求數15
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?