64
GitHub - alibaba/GGEditor: A visual graph editor based on G6 and React
source link: https://github.com/alibaba/GGEditor
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
English | 简体中文
GGEditor
A visual graph editor based on G6 and React.
Demo
Installation
npm
npm install --save gg-editor
umd
<script src="https://unpkg.com/gg-editor@${version}/dist/bundle.js"></script>
run demo
$ git clone https://github.com/gaoli/GGEditor.git
$ cd gg-editor
$ npm install
$ npm start
Usage
Flow
import GGEditor, { Flow } from 'gg-editor'; const data = { nodes: [{ type: 'node', size: '70*70', shape: 'flow-circle', color: '#FA8C16', label: '起止节点', x: 55, y: 55, id: 'ea1184e8', index: 0, }, { type: 'node', size: '70*70', shape: 'flow-circle', color: '#FA8C16', label: '结束节点', x: 55, y: 255, id: '481fbb1a', index: 2, }], edges: [{ source: 'ea1184e8', sourceAnchor: 2, target: '481fbb1a', targetAnchor: 0, id: '7989ac70', index: 1, }], }; <GGEditor> <Flow style={{ width: 500, height: 500 }} data={data} /> </GGEditor>
Mind
import GGEditor, { Mind } from 'gg-editor'; const data = { roots: [{ label: '中心主题', children: [{ label: '分支主题 1', }, { label: '分支主题 2', }, { label: '分支主题 3', }], }], }; <GGEditor> <Mind style={{ width: 500, height: 500 }} data={data} /> </GGEditor>
Documentation
DingTalk Group
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK