@dzc/tree-graph
Advanced tools
基于react、antd、antv/g6封装的关系图组件
npm i @dzc/tree-graph --save
import React from 'react';
import TreeGraph from '@dzc/tree-graph';
export default () => {
const treeData = {
nodes: [
{
id: "1",
status: 1,
nodeType: 0,
dataType: "alps",
name: "alps_file1",
conf: "我是根节点"
},
{
id: "2",
status: 2,
nodeType: 1,
dataType: "alps",
name: "alps_file2",
conf: []
},
{
id: "3",
status: 3,
nodeType: 0,
dataType: "alps",
name: "alps_file3",
conf: [
{
label: "conf",
value: "pai_graph.conf"
},
{
label: "dot",
value: "pai_graph.dot"
},
{
label: "init",
value: "init.rc"
}
]
},
{
id: "4",
status: 4,
nodeType: 2,
dataType: "sql",
name: "sql_file1",
conf: [
{
label: "conf",
value: "pai_graph.conf"
},
{
label: "dot",
value: "pai_graph.dot"
},
{
label: "init",
value: "init.rc"
}
]
},
{
id: "5",
status: 5,
nodeType: 1,
dataType: "sql",
name: "sql_file2",
conf: [
{
label: "conf",
value: "pai_graph.conf"
},
{
label: "dot",
value: "pai_graph.dot"
},
{
label: "init",
value: "init.rc"
}
]
},
{
id: "6",
status: 2,
nodeType: 0,
dataType: "feature_etl",
name: "feature_etl_1",
conf: [
{
label: "conf",
value: "pai_graph.conf"
},
{
label: "dot",
value: "pai_graph.dot"
},
{
label: "init",
value: "init.rc"
}
]
},
{
id: "7",
status: 3,
nodeType: 1,
dataType: "feature_etl",
name: "feature_etl_1",
conf: [
{
label: "conf",
value: "pai_graph.conf"
},
{
label: "dot",
value: "pai_graph.dot"
},
{
label: "init",
value: "init.rc"
}
]
},
{
id: "8",
status: 0,
nodeType: 2,
dataType: "feature_extractor",
name: "feature_extractor",
conf: [
{
label: "conf",
value: "pai_graph.conf"
},
{
label: "dot",
value: "pai_graph.dot"
},
{
label: "init",
value: "init.rc"
}
]
}
],
edges: [
{
source: "1",
target: "2"
},
{
source: "1",
target: "3"
},
{
source: "2",
target: "4"
},
{
source: "3",
target: "4"
},
{
source: "4",
target: "5"
},
{
source: "5",
target: "6"
},
{
source: "6",
target: "7"
},
{
source: "6",
target: "8"
}
]
};
const treeGraphProps = {
graphHeight: "100%",
dataType: 1,
dir: "LR",
loading: false,
showLogoIcon: true,
showStateIcon: true,
descKey: "conf",
descItemKey: "label",
nodePosKey: 'position',
descItemValue: "value",
nodeNameKey: "name",
nodeIdKey: "id",
menuKey: "key",
menuValue: "name",
nodeType: "modelRect",
nodeSize: [150, 32],
parentId: null,
parentIdKey: 'parent',
modes: ["drag-canvas", "drag-node", "zoom-canvas", "click-select"],
clickMenu: (item) => {
console.warn("点击了右键菜单", item);
},
clickNode: (item) => {
console.warn("点击了节点", item);
},
refresh: () => {
console.warn("刷新了页面");
},
nodeDragendNode: (item) => {
console.warn('画布节点拖拽结束', item);
},
saveNodesPos: (item) => {
console.warn('保存画布信息', item);
},
menuList: [
{ key: "1", name: "新增节点" },
{ key: "2", name: "探索节点" },
{ key: "3", name: "编辑节点" }
],
data: treeData
};
return <TreeGraph {...treeGraphProps} />;
};
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| graphHeight | 组件高度 | string | number | '100%' | - |
| dataType | 数据格式类型 | number | 1 | 1（包含节点列表、连线列表两部分） 2（带有 children 的树形结构） 3（一维数组，根据 parent 查找父级） 4（支持1、3数据格式类型的数据，节点需要根据坐标x，y渲染） |
| dir | 布局方向 | string | 'LR' | 'LR'（从左往右） 'RL'（从右往左） 'TB'（从上往下） 'BT'（从下往上） 'H'（根节点在中间，水平对称布局） 'V'（根节点在中间，垂直对称布局） |
| data | 数据 | array | object | [] | {} | - |
| loading | 画布加载效果 | boolean | false | ture | false |
| parentId | 根节点 id，仅在 dataType 为 3 时生效 | any | null | - |
| parentIdKey | 父节点字段名 | string | 'parent' | - |
| nodePosKey | 节点位置字段名 | object | 'position' | position: {x: number, y: number} |
| desKey | 节点描述字段名 | string | 'desc' | - |
| desItemKey | 节点描述字段名 | string | 'name' | - |
| desItemValue | 节点描述字段名 | string | 'value' | - |
| nodeNameKey | 节点名称字段名 | string | 'name' | - |
| nodeIdKey | 节点 id 字段名 | string | 'id' | - |
| nodeType | 节点形状类型 | string | 'modelRect' | 如'circle'、'rect'、'ellipse'等，具体请参考：https://g6.antv.vision/zh/docs/manual/middle/elements/nodes/defaultNode |
| nodeSize | 节点大小，设置节点的宽、高 | array | [150, 32] | - |
| modes | 画布行为模式，比如是否支持拖拽画布、拖拽节点、缩放画布、选中节点 | array | ['drag-canvas', 'drag-node', 'zoom-canvas', 'click-select'] | - |
| menuList | 右键菜单列表 | array | [] | - |
| menuKey | 右键菜单字段名 | string | 'key' | - |
| menuValue | 右键菜单字段名 | string | 'name' | - |
| showLogoIcon | 是否显示节点类型 icon | boolean | false | ture | false |
| showStateIcon | 是否显示节点状态 icon | boolean | false | ture | false |
| typeObj | 节点类型集合 | object | - | - |
| stateObj | 节点状态类型集合 | object | - | - |
| clickMenu | 右键菜单点击事件 | function(item) | - | - |
| clickNode | 节点点击事件 | function(item) | - | - |
| nodeDragendNode | 画布节点拖拽结束事件 | function(item) | - | - |
| saveNodesPos | 保存画布中所有节点位置事件 | function(item) | - | - |
| refresh | 重新请求接口，刷新画布 | function(item) | - | - |
status = 0，成功
status = 1，失败
status = 2，运行中
status = 3，警告
status = 4，提示
status = 5，疑问
2.0.2 组件样式修复
2.0.1 组件样式修复
2.0.0 组件发布
// dataType = 1，包含节点列表、连线列表两部分
{
nodes: [
{
id: '1',
status: 1,
nodeType: 0,
dataType: 'alps',
name: 'alps_file1',
conf: '我是根节点',
},
{
id: '2',
status: 2,
nodeType: 1,
dataType: 'alps',
name: 'alps_file2',
conf: [],
},
{
id: '3',
status: 3,
nodeType: 0,
dataType: 'alps',
name: 'alps_file3',
conf: [
{
label: 'conf',
value: 'pai_graph.conf',
},
{
label: 'dot',
value: 'pai_graph.dot',
},
{
label: 'init',
value: 'init.rc',
},
],
},
{
id: '4',
status: 4,
nodeType: 2,
dataType: 'sql',
name: 'sql_file1',
conf: [
{
label: 'conf',
value: 'pai_graph.conf',
},
{
label: 'dot',
value: 'pai_graph.dot',
},
{
label: 'init',
value: 'init.rc',
},
],
},
{
id: '5',
status: 5,
nodeType: 1,
dataType: 'sql',
name: 'sql_file2',
conf: [
{
label: 'conf',
value: 'pai_graph.conf',
},
{
label: 'dot',
value: 'pai_graph.dot',
},
{
label: 'init',
value: 'init.rc',
},
],
},
{
id: '6',
status: 2,
nodeType: 0,
dataType: 'feature_etl',
name: 'feature_etl_1',
conf: [
{
label: 'conf',
value: 'pai_graph.conf',
},
{
label: 'dot',
value: 'pai_graph.dot',
},
{
label: 'init',
value: 'init.rc',
},
],
},
{
id: '7',
status: 3,
nodeType: 1,
dataType: 'feature_etl',
name: 'feature_etl_1',
conf: [
{
label: 'conf',
value: 'pai_graph.conf',
},
{
label: 'dot',
value: 'pai_graph.dot',
},
{
label: 'init',
value: 'init.rc',
},
],
},
{
id: '8',
status: 0,
nodeType: 2,
dataType: 'feature_extractor',
name: 'feature_extractor',
conf: [
{
label: 'conf',
value: 'pai_graph.conf',
},
{
label: 'dot',
value: 'pai_graph.dot',
},
{
label: 'init',
value: 'init.rc',
},
],
},
],
edges: [
{
source: '1',
target: '2',
},
{
source: '1',
target: '3',
},
{
source: '2',
target: '4',
},
{
source: '3',
target: '4',
},
{
source: '4',
target: '5',
},
{
source: '5',
target: '6',
},
{
source: '6',
target: '7',
},
{
source: '6',
target: '8',
},
],
}
// dataType = 2，带有children的树形结构
{
id: '200000004',
tooltip: 'Thing',
label: '事物',
description: null,
descriptionZh: null,
depth: 3,
subTypeCount: 9,
status: 0,
children: [
{
id: '500000061',
tooltip: 'Person',
label: '自然人',
description: null,
descriptionZh: null,
depth: 1,
subTypeCount: 1,
status: 0,
children: [
{
id: '707000085',
tooltip: 'FilmPerson',
label: '电影人',
description: null,
descriptionZh: null,
depth: 5,
subTypeCount: 3,
status: 1,
children: [
{
id: '707000090',
tooltip: 'FilmDirector',
label: '电影导演',
description: null,
descriptionZh: null,
depth: 0,
subTypeCount: 0,
status: 1,
children: [],
},
{
id: '707000091',
tooltip: 'FilmWriter',
label: '电影编剧',
description: null,
descriptionZh: null,
depth: 4,
subTypeCount: 0,
status: 1,
children: [],
},
{
id: '707000092',
tooltip: 'FilmStar',
label: '电影主演',
description: null,
descriptionZh: null,
depth: 4,
subTypeCount: 0,
status: 1,
children: [],
},
],
},
{
id: '707000086',
tooltip: 'MusicPerson',
label: '音乐人',
description: null,
descriptionZh: null,
depth: 17,
subTypeCount: 2,
status: 1,
children: [],
},
],
},
{
id: '200000005',
tooltip: 'Music',
label: '音乐',
description: null,
descriptionZh: null,
depth: 3,
subTypeCount: 2,
status: 1,
children: [],
},
{
id: '707000128',
tooltip: 'Film',
label: '电影',
description: null,
descriptionZh: null,
depth: 4,
subTypeCount: 0,
status: 1,
children: [
{
id: '7070032328',
tooltip: 'Comedy',
label: '喜剧',
description: null,
descriptionZh: null,
depth: 4,
operation: 'C',
subTypeCount: 0,
status: 1,
children: [],
},
],
},
{
id: '707000095',
tooltip: 'FilmGenre',
label: '电影类别',
description: null,
descriptionZh: null,
depth: 4,
subTypeCount: 0,
status: 1,
children: [],
},
{
id: '702000021',
tooltip: 'Organization',
label: '机构',
description: null,
descriptionZh: null,
depth: 47,
subTypeCount: 1,
status: 0,
children: [
{
id: '500000063',
tooltip: 'Company',
label: '公司',
description: null,
descriptionZh: null,
depth: 4,
subTypeCount: 2,
status: 1,
children: [
{
id: '707000093',
tooltip: 'FilmCompany',
label: '电影公司',
description: null,
descriptionZh: null,
depth: 4,
subTypeCount: 0,
status: 1,
children: [],
},
{
id: '707000094',
tooltip: 'MusicCompany',
label: '音乐公司',
description: null,
descriptionZh: null,
depth: 2,
subTypeCount: 0,
status: 1,
children: [],
},
],
},
],
},
],
}
// dataType = 3，一维数组，根据parent查找父级
[
{
"id":400,
"createdAt":"2021-10-26 14:29:18",
"updatedAt":"2021-10-26 14:29:18",
"appName":"拼多多",
"keyword":"拼多多",
"level":1,
"parent":307,
"version":"moye",
"quotaId":1885,
"quotaPathId":1886,
"specifiedQuotaId":1884,
"linkKeyWord":"拼多多",
"extNewestNode":true,
"quotas":[
{
"name":"关键词签名占比",
"value":"1.4048%"
},
{
"name":"关键词链路占比",
"value":"1.4048%"
},
{
"name":"关键词全局占比",
"value":"100.0%"
}
]
},
{
"id":420,
"createdAt":"2021-10-26 17:17:10",
"updatedAt":"2021-10-26 17:18:42",
"appName":"拼多多",
"keyword":"服装",
"level":2,
"parent":400,
"version":"moye",
"quotaId":1969,
"quotaPathId":1970,
"specifiedQuotaId":1960,
"linkKeyWord":"拼多多 服装",
"extNewestNode":true,
"quotas":[
{
"name":"关键词签名占比",
"value":"0.8117%"
},
{
"name":"关键词链路占比",
"value":"0.8117%"
},
{
"name":"关键词全局占比",
"value":"0.0113%"
}
]
},
{
"id":421,
"createdAt":"2021-10-26 17:17:45",
"updatedAt":"2021-10-26 17:17:45",
"appName":"菜鸟驿站",
"keyword":"菜鸟驿站",
"level":1,
"parent":307,
"version":"moye",
"quotaId":1964,
"quotaPathId":1965,
"specifiedQuotaId":1963,
"linkKeyWord":"菜鸟驿站",
"extNewestNode":true,
"quotas":[
{
"name":"关键词签名占比",
"value":"4.4052%"
},
{
"name":"关键词链路占比",
"value":"4.4052%"
},
{
"name":"关键词全局占比",
"value":"100.0%"
}
]
},
{
"id":423,
"createdAt":"2021-10-27 09:33:35",
"updatedAt":"2021-10-27 09:33:35",
"appName":"工商银行",
"keyword":"工商银行",
"level":1,
"parent":307,
"version":"moye",
"quotaId":1972,
"quotaPathId":1973,
"specifiedQuotaId":1971,
"linkKeyWord":"工商银行",
"extNewestNode":true,
"quotas":[
{
"name":"关键词签名占比",
"value":"2.6727%"
},
{
"name":"关键词链路占比",
"value":"2.6727%"
},
{
"name":"关键词全局占比",
"value":"100.0%"
}
]
},
{
"id":429,
"createdAt":"2021-10-28 10:59:36",
"updatedAt":"2021-10-28 11:01:01",
"appName":"拼多多",
"keyword":"优惠",
"level":2,
"parent":400,
"version":"moye",
"quotaId":1999,
"quotaPathId":2001,
"specifiedQuotaId":1991,
"linkKeyWord":"拼多多 优惠",
"extNewestNode":true,
"quotas":[
{
"name":"关键词签名占比",
"value":"14.603%"
},
{
"name":"关键词链路占比",
"value":"14.603%"
},
{
"name":"关键词全局占比",
"value":"0.2043%"
}
]
},
{
"id":430,
"createdAt":"2021-10-28 11:53:51",
"updatedAt":"2021-10-28 11:56:46",
"appName":"拼多多",
"keyword":"看过",
"level":3,
"parent":420,
"version":"moye",
"quotaId":2008,
"quotaPathId":2009,
"specifiedQuotaId":2002,
"linkKeyWord":"拼多多 服装 看过",
"extNewestNode":true,
"quotas":[
{
"name":"关键词签名占比",
"value":"0.0922%"
},
{
"name":"关键词链路占比",
"value":"11.368%"
},
{
"name":"关键词全局占比",
"value":"0.1096%"
}
]
},
{
"id":431,
"createdAt":"2021-10-28 11:56:39",
"updatedAt":"2021-10-28 11:56:47",
"appName":"拼多多",
"keyword":"阈值",
"level":4,
"parent":430,
"version":"moye",
"quotaId":2010,
"quotaPathId":2011,
"specifiedQuotaId":2005,
"linkKeyWord":"拼多多 服装 看过 阈值",
"extNewestNode":true,
"quotas":[
{
"name":"关键词签名占比",
"value":"0.0911%"
},
{
"name":"关键词链路占比",
"value":"98.890%"
},
{
"name":"关键词全局占比",
"value":"0.8271%"
}
]
},
{
"id":307,
"createdAt":null,
"updatedAt":null,
"appName":"moye",
"keyword":"moye",
"level":0,
"parent":null,
"version":"moye",
"quotaId":null,
"quotaPathId":null,
"specifiedQuotaId":null,
"linkKeyWord":null,
"extNewestNode":true,
"quotas":[]
}
]
// dataType = 4，根据节点坐标渲染节点
{
"data":[
{
"id":86,
"createdAt":"2021-11-08 17:17:11",
"updatedAt":"2021-11-09 14:23:28",
"appName":"test_moye",
"keyword":"菜鸟驿站",
"level":1,
"parent":85,
"version":"test_moye",
"quotaId":179,
"quotaPathId":180,
"specifiedQuotaId":178,
"linkKeyWord":"null 菜鸟驿站",
"extNewestNode":true,
"nodeFeature":"{\"x\":\"367.76435790285575\",\"y\":\"830.1433120677996\"}",
"quotas":[
{
"name":"关键词签名占比",
"value":"0.0%",
"molecule":null,
"denominator":null
},
{
"name":"关键词链路占比",
"value":"0.0%",
"molecule":null,
"denominator":null
},
{
"name":"关键词全局占比",
"value":"100.0%",
"molecule":null,
"denominator":null
}
]
},
{
"id":87,
"createdAt":"2021-11-08 17:17:21",
"updatedAt":"2021-11-09 14:23:28",
"appName":"test_moye",
"keyword":"银行",
"level":2,
"parent":86,
"version":"test_moye",
"quotaId":182,
"quotaPathId":183,
"specifiedQuotaId":181,
"linkKeyWord":"null 菜鸟驿站 银行",
"extNewestNode":true,
"nodeFeature":"{\"x\":\"683.1804008081278\",\"y\":\"625.4075051115944\"}",
"quotas":[
{
"name":"关键词签名占比",
"value":"0.0%",
"molecule":null,
"denominator":null
},
{
"name":"关键词链路占比",
"value":"0.0%",
"molecule":null,
"denominator":null
},
{
"name":"关键词全局占比",
"value":"0.0%",
"molecule":null,
"denominator":null
}
]
},
{
"id":85,
"createdAt":null,
"updatedAt":null,
"appName":"test_moye",
"keyword":null,
"level":0,
"parent":null,
"version":"test_moye",
"quotaId":null,
"quotaPathId":null,
"specifiedQuotaId":null,
"linkKeyWord":null,
"extNewestNode":true,
"nodeFeature":"{\"x\":200,\"y\":250}",
"quotas":[
]
}
],
"code":"200",
"msg":"ok"
}
如需支持更多自定义效果，请联系作者逐步完善
开发者：诺克
微信：15858194070
开发不易，开源不易。如果这篇经验对您有所帮助，请多给我一些鼓励和支持，谢谢！。
FAQs
We found that @dzc/tree-graph demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Socket now integrates with Bun 1.3’s Security Scanner API to block risky packages at install time and enforce your organization’s policies in local dev and CI.
Research
The Socket Threat Research Team is tracking weekly intrusions into the npm registry that follow a repeatable adversarial playbook used by North Korean state-sponsored actors.