0.0.2 • Published 3 years ago
antv-tree-graph v0.0.2
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) {}
)