tree-graph 基于 G6 的开箱即用应用

安装

yarn add tree-graph --save --registry https://nexus.alltosea.com/repository/nhc-npm-group/

主要实现功能

• � 右键菜单
• � 节点 hover 效果
• 数据驱动
• 画布自适应

demo

 import TreeGraph from 'tree-graph';
 const data = {

    "id": "0",
    "level": 0,
    "collapsed": false,
    "dataType": "root",
    "name": "2020.03.12 13:03 hwx测试",
    "data": {},
    "children": [
      {
        "id": "1336529001644064",
        "fid": "0",
        "level": 1,
        "collapsed": true,
        "dataType": "",
        "name": "2020.03.12 13:03 申请资源名称2",
         "conextMenu": []
        "data": {
          "isImmediate": true,

        },
        "children": [
          {
            "id": "1336534944972832",
            "fid": "1336529001644064",
            "level": 2,
            "collapsed": true,
            "dataType": "",
            "name": "测试三",
            "data": {}
          }
        ]
      },
      {
        "id": "1336528909369376",
        "fid": "0",
        "level": 1,
        "collapsed": true,
        "dataType": "",
        "name": "2020.03.12 13:03 申请资源名称",
        "conextMenu": [
            {
              "name": "资源表:来穗人口调查",
              "data": {}
            },
            {
              "name": "附件",
              "data": {}
            }
          ]
        "data": {

        }
      },
      {
        "id": "1336532740866080",
        "fid": "0",
        "level": 1,
        "collapsed": true,
        "dataType": "",
        "name": "测试",
        "data": {}
      }
    ]

}
� const config = { data:data, container:'container'};
 console.log('config', config);
 const taskRelationshipDiagram = new TreeGraph(config);

API

data

参数	说明	类型	默认值	require
id	节点唯一标识	string	-	true
fid	父节点 id（最顶层节点可不传）	string	-	true
level	节点层次	number	-	false
collapsed	是否展开	boolean	false	false
name	节点 title	string	-	false
data	模型数据	object	-	false
conextMenu	右键菜单	array	-	false
children	子节点	object	-	false
disableExpandIcon	隐藏展开收宿 icon	boolean	false	false

data.conextMenu

参数	说明	类型	默认值	require
name	右键菜单列表 title	string	-	true
data	右键菜单列表数据	object	-	false

treeGraph.Graph

返回图表的载体,等同 G6.Graph 用 � 法可参考 https://g6.antv.vision/zh/docs/api/Graph

回调参数

treeGraph.conextMenuClick

右键菜单回调函数

名称	类型	描述
data	object	conextMenu.data 数据

例：treeGraph.conextMenuClick(
  function(data) {}
)