GGEditor

الإنجليزية | مبسطة الصينية

جوزور

G6 ومحرر الرسم البياني المرئي القائم على رد الفعل

ثَبَّتَ

NPM

npm install gg-editor --save

UMD

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

يستخدم

مخطط التدفق

 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 > ;

مخطط الدماغ

 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