• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

gg-editor: 基于 G6 和 React 的可视化图编辑器

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

gg-editor

开源软件地址:

https://gitee.com/gaoli.gl/gg-editor

开源软件介绍:

English | 简体中文

GGEditor

基于 G6React 的可视化图编辑器

GitHubnpmnpm

安装

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
类型示例源码
图表flowsource
图表mindsource
组件component-commandsource
组件component-item-panelsource
组件component-detail-panelsource
插件plugin-editable-labelsource
插件plugin-item-popoversource
插件plugin-context-menusource

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap