antv g6
网址
注意网上搜的点进去文档不详细
https://g6.antv.antgroup.com/manual/introduction
js资源
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
知识点
-
无论是图还是树，每种布局都有自己的特点。比如相同层级在一个水平线上，这种布局在自定义节点（同一水平的节点左对齐或右对齐）和自定义边（画线）很重要
-
关于自定义节点，位置坐标计算：注意每个节点都用的同一个坐标系，因此主图形和其它图形都是在用x、y算相互之间的相对位置
效果：
-
关于自定义边：
-
- （一）注意开始和结束锚点的指定，似乎
画线的cfg.startPoint和cfg.endPoint都是根据这个锚点来的，startPoint是出发节点的开始锚点，endPoint是终点节点的结束锚点
- （一）注意开始和结束锚点的指定，似乎
++ 关于path里面的M、L指令讲解
M就是指从个x、y坐标为起点，L就是指画直线到指定的x,y
还有其它字母含义：路径
demo
自定义边
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Tutorial Demo</title><!-- <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">--><link href="./js/layui/css/layui.css" rel="stylesheet">
</head>
<style></style>
<body ><div id="container" style="width: 100%; height:100%;margin-top: 10px"></div><!--
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
--><script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>const data = {nodes: [{id: '2',x: 150,y: 150,},{id: '3',x: 350,y: 250,},{id: '4',x: 50,y: 250,}],edges: [{source: '2',target: '3',},{source: '2',target: '4',},],};G6.registerEdge('hvh', {draw(cfg, group) {const startPoint = cfg.startPoint;const endPoint = cfg.endPoint;const shape = group.addShape('path', {attrs: {stroke: '#333',path: [['M', startPoint.x, startPoint.y],//从开始节点的 开始锚点 移动画笔['L', startPoint.x, startPoint.y + (endPoint.y - startPoint.y)/2],// 移动到一二层级 的中间 画线['L', endPoint.x, startPoint.y + (endPoint.y - startPoint.y)/2],// 移动到终点节点的 结束锚点上方 画线['L', endPoint.x, endPoint.y] //画线到终点节点的 结束锚点],endArrow: {path: G6.Arrow.triangle(10, 20, 25),d: 25,fill: '#f00',//箭头边颜色stroke: '#0f0',//箭头填充色}},// 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性name: 'path-shape',});return shape;},});const width = document.getElementById('container').scrollWidth;const height = document.getElementById('container').scrollHeight || 500;const graph = new G6.Graph({container: 'container',width,height,/* translate the graph to align the canvas's center, support by v3.5.1 */fitCenter: true,modes: {/* behavior */default: ['drag-node'],},defaultNode: {type: 'rect',// 其他配置anchorPoints: [[0.5, 0],[0.5, 1],],},defaultEdge: {type: 'hvh',// 定义开始节点。该边连入 source 点的第 0 个 anchorPoint，sourceAnchor: 0,// 定义结束节点。该边连入 target 点的第 1 个 anchorPoint，targetAnchor: 1,},/* styles for different states, there are built-in styles for states: active, inactive, selected, highlight, disable */// edgeStateStyles: {// // edge style of active state// active: {// opacity: 0.5,// stroke: '#f00'// },// // edge style of selected state// selected: {// stroke: '#ff0'// lineWidth: 3,// },// },});graph.data(data);graph.render();graph.on('edge:mouseenter', (evt) => {const { item } = evt;graph.setItemState(item, 'active', true);});graph.on('edge:mouseleave', (evt) => {const { item } = evt;graph.setItemState(item, 'active', false);});graph.on('edge:click', (evt) => {const { item } = evt;graph.setItemState(item, 'selected', true);});graph.on('canvas:click', (evt) => {graph.getEdges().forEach((edge) => {graph.clearItemStates(edge);});});</script>
</body>
</html>
自定义边2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Tutorial Demo</title><!-- <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">--><link href="./js/layui/css/layui.css" rel="stylesheet">
</head>
<style></style>
<body ><div id="container" style="width: 100%; height:100%;margin-top: 10px"></div><!--
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
--><script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>const data = {nodes: [{id: '2',x: 150,y: 325,},{id: '3',x: 350,y: 250,},{id: '4',x: 350,y: 400,},{id: '5',x: -50,y: 400,},{id: '6',x: -50,y: 250,}],edges: [{source: '2',target: '3',},{source: '2',target: '4',},{source: '2',target: '5',},{source: '2',target: '6',},],};G6.registerEdge('hvh', {draw(cfg, group) {const startPoint = cfg.startPoint;const endPoint = cfg.endPoint;const shape = group.addShape('path', {attrs: {stroke: '#333',path: [['M', startPoint.x, startPoint.y],//从开始节点的 开始锚点 移动画笔['L', startPoint.x + (endPoint.x - startPoint.x)/2, startPoint.y], //画线到终点节点的 结束锚点['L', startPoint.x + (endPoint.x - startPoint.x)/2, (startPoint.y + (endPoint.y - startPoint.y))],['L', endPoint.x - 20, (startPoint.y + (endPoint.y - startPoint.y))]],endArrow: {path: G6.Arrow.triangle(10, 20, 25),d: 25,fill: '#f00',//箭头边颜色stroke: '#0f0',//箭头填充色}},// 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性name: 'path-shape',});return shape;},});const width = document.getElementById('container').scrollWidth;const height = document.getElementById('container').scrollHeight || 500;const graph = new G6.Graph({container: 'container',width,height,/* translate the graph to align the canvas's center, support by v3.5.1 */fitCenter: true,linkCenter: true,//当箭头搓到矩形里面的时候，用这个似乎能让箭头指到锚点上modes: {/* behavior */default: ['drag-node'],},defaultNode: {type: 'rect',// 其他配置anchorPoints: [[0, 0.5],[1, 0.5],],},defaultEdge: {type: 'hvh',// 定义开始节点。该边连入 source 点的第 0 个 anchorPoint，sourceAnchor: 0,// 定义结束节点。该边连入 target 点的第 1 个 anchorPoint，targetAnchor: 1,},/* styles for different states, there are built-in styles for states: active, inactive, selected, highlight, disable */// edgeStateStyles: {// // edge style of active state// active: {// opacity: 0.5,// stroke: '#f00'// },// // edge style of selected state// selected: {// stroke: '#ff0'// lineWidth: 3,// },// },});graph.data(data);graph.render();graph.on('edge:mouseenter', (evt) => {const { item } = evt;graph.setItemState(item, 'active', true);});graph.on('edge:mouseleave', (evt) => {const { item } = evt;graph.setItemState(item, 'active', false);});graph.on('edge:click', (evt) => {const { item } = evt;graph.setItemState(item, 'selected', true);});graph.on('canvas:click', (evt) => {graph.getEdges().forEach((edge) => {graph.clearItemStates(edge);});});</script>
</body>
</html>
使用布局自定义边
从图例可以看出，脑图树会自动生成箭头，只是目前做法右侧箭头没指到终点矩形上，这是因为右侧开始的锚点在左侧，导致有一部分箭头线被开始矩形遮挡了，目前处理方法就是统一给右侧箭头线增加一定长度
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Tutorial Demo</title><!-- <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">--><link href="./js/layui/css/layui.css" rel="stylesheet">
</head>
<style></style>
<body ><div id="container" style="width: 100%; height:100%;margin-top: 10px"></div><!--
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
--><script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json').then((res) => res.json()).then((data2) => {const data = {"id": "Modeling Methods","children": [{"id": "Classification","children": [{"id": "Logistic regression"},{"id": "Linear discriminant analysis"},{"id": "Rules"},{"id": "Decision trees"},{"id": "Naive Bayes"},{"id": "K nearest neighbor"},{"id": "Probabilistic neural network"},{"id": "Support vector machine"}]},{"id": "Consensus","children": [{"id": "Models diversity","children": [{"id": "Different initializations"},{"id": "Different parameter choices"},{"id": "Different architectures"},{"id": "Different modeling methods"},{"id": "Different training sets"},{"id": "Different feature sets"}]},{"id": "Methods","children": [{"id": "Classifier selection"},{"id": "Classifier fusion"}]},{"id": "Common","children": [{"id": "Bagging"},{"id": "Boosting"},{"id": "AdaBoost"}]}]},{"id": "Regression","children": [{"id": "Multiple linear regression"},{"id": "Partial least squares"},{"id": "Multi-layer feedforward neural network"},{"id": "General regression neural network"},{"id": "Support vector regression"}]}]}G6.registerEdge('hvh', {draw(cfg, group) {const startPoint = cfg.startPoint;const endPoint = cfg.endPoint;debuggerconst shape = group.addShape('path', {attrs: {stroke: '#333',path: [['M', startPoint.x, startPoint.y],//从开始节点的 开始锚点 移动画笔['L', startPoint.x + (endPoint.x - startPoint.x)/2, startPoint.y], //画线到终点节点的 结束锚点['L', startPoint.x + (endPoint.x - startPoint.x)/2, (startPoint.y + (endPoint.y - startPoint.y))],['L', endPoint.x - 20, (startPoint.y + (endPoint.y - startPoint.y))]],endArrow: {path: G6.Arrow.triangle(10, 20, 25),d: 25,fill: '#f00',//箭头边颜色stroke: '#0f0',//箭头填充色}},// 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性name: 'path-shape',});return shape;},});const container = document.getElementById('container');const width = container.scrollWidth;const height = container.scrollHeight || 500;const graph = new G6.TreeGraph({container: 'container',width,height,linkCenter: true,modes: {default: [{type: 'collapse-expand',onChange: function onChange(item, collapsed) {const data = item.get('model');data.collapsed = collapsed;return true;},},'drag-canvas','zoom-canvas',],},defaultNode: {size: 26,anchorPoints: [[0, 0.5],[1, 0.5],],},defaultEdge: {type: 'hvh',},layout: {type: 'mindmap',direction: 'H',getHeight: () => {return 16;},getWidth: () => {return 16;},getVGap: () => {return 10;},getHGap: () => {return 200;},getSide: (d) => {if (d.id === 'Classification') {return 'left';}return 'right';},},});let centerX = 0;graph.node(function (node) {if (node.id === 'Modeling Methods') {centerX = node.x;}return {label: node.id,labelCfg: {position:node.children && node.children.length > 0? 'left': node.x > centerX? 'right': 'left',offset: 5,},};});graph.data(data);graph.render();graph.fitView();if (typeof window !== 'undefined')window.onresize = () => {if (!graph || graph.get('destroyed')) return;if (!container || !container.scrollWidth || !container.scrollHeight) return;graph.changeSize(container.scrollWidth, container.scrollHeight);};});</script>
</body>
</html>
上下结构图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Tutorial Demo</title><!-- <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">--><link href="./js/layui/css/layui.css" rel="stylesheet">
</head>
<style></style>
<body style="position: relative">
<div style="width: 100%; height:10%;position: absolute;top: 5px"><div class="layui-row"><div class="layui-col-xs10"><div class="grid-demo grid-demo-bg1"> </div></div><div class="layui-col-xs1"><button class="layui-btn layui-btn-primary demo-dropdown-base" style="position: relative;width: 80px;height: 30px"><span style="position: absolute;left: 10px;top: -5px;">展示层级</span><i class="layui-icon layui-icon-down layui-font-12" style="position: absolute;top: -5px;right: 1px"></i></button></div><div class="layui-col-xs1"><button type="button" id="savePic" class="layui-btn layui-btn-primary layui-border layui-btn-sm" >保存图片</button></div></div>
</div>
<div id="container" style="width: 100%; height:100%"></div><!--
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
--><script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
<script>layui.use(function(){fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')// /leatc/jiagoutu/guquanjiagoutuExample.jsp.then((res) => res.json()).then((data2) => {const data ={"id": "1","name": "四川省国有资产经营投资管理有限责任公司","type": "guquanjiagou-root-tree-node","children": [{"id": "2","name": "四川省天财网络有限责任公司","titlePercentDesc": "","children": []},{"id": "3","name": "四川国经兴农投资有限责任公司","titlePercentDesc": "","children": [{"id": "13","name": "四川国经国康农业有限责任公司","titlePercentDesc": "控股100%","children": []},{"id": "15","name": "四川中农润泽生物科技有限公司","titlePercentDesc": "控股100%","children": [{"id": "41","name": "四川中农肥力生态农业有限责任公司","titlePercentDesc": "控股51%","children": []},{"id": "42","name": "贵州中农润泽生物科技有限公司","titlePercentDesc": "控股51%","children": []},{"id": "43","name": "德阳中农润泽生物科技有限公司","titlePercentDesc": "控股51%","children": []},{"id": "44","name": "四川农域土壤治理工程技术研究院（普通合伙）","titlePercentDesc": "控股51%","children": []},{"id": "45","name": "四川华地康生态农业科技有限公司","titlePercentDesc": "控股51%","children": []}]},{"id": "26","name": "四川国经瑞丰供应链管理有限公司","titlePercentDesc": "控股100%","children": []},{"id": "31","name": "四川国惠环境投资有限公司","titlePercentDesc": "控股100%","children": []},{"id": "32","name": "四川现代农业融资担保有限责任公司","titlePercentDesc": "控股100%","children": []},{"id": "33","name": "四川国康源生物科技有限责任公司","titlePercentDesc": "控股100%","children": []},{"id": "34","name": "四川龙蛋数字农业供应链有限公司","titlePercentDesc": "控股100%","children": []},{"id": "35","name": "汇链通产业供应链数字科技（厦门）有限公司","titlePercentDesc": "控股100%","children": []},{"id": "36","name": "广西鲲信信豫创业投资合伙企业（有限合伙）","titlePercentDesc": "控股100%","children": []},{"id": "37","name": "共青城航科国惠环保产业投资中心（有限合伙）","titlePercentDesc": "控股100%","children": []},{"id": "38","name": "四川国经增联供应链管理有限责任公司","titlePercentDesc": "控股100%","children": []},{"id": "39","name": "共青城航科慧农产业投资中心（有限合伙）","titlePercentDesc": "控股100%","children": []},{"id": "40","name": "内蒙古航科慧农私募基金管理有限公司","titlePercentDesc": "控股100%","children": []},{"id": "46","name": "通江宜农土地综合整治有限责任公司","titlePercentDesc": "控股100%","children": []}]},{"id": "4","name": "四川兰田工业食品有限公司","titlePercentDesc": "","children": []},{"id": "7","name": "四川省信托投资公司","titlePercentDesc": "","children": [{"id": "8","name": "北海海神实业投资公司","titlePercentDesc": "","children": [{"id": "9","name": "北海怡宝食品公司","titlePercentDesc": "","children": []}]}]},{"id": "10","name": "四川省国际信托投资公司","titlePercentDesc": "","children": [{"id": "11","name": "四川省国托物业管理有限责任公司","titlePercentDesc": "控股%","children": []}]},{"id": "12","name": "四川国经扬华集团有限公司","titlePercentDesc": "","children": [{"id": "16","name": "成都扬华投资管理有限公司","titlePercentDesc": "","children": [{"id": "20","name": "测试股东出资单位","titlePercentDesc": "控股100%","children": [{"id": "24","name": "会理宜农土地综合整治有限责任公司","titlePercentDesc": "","children": []}]},{"id": "21","name": "测试数据001","titlePercentDesc": "控股100%","children": []},{"id": "99","name": "成都交大工程技术建设开发有限公司","titlePercentDesc": "控股100%","children": []},{"id": "100","name": "成都交大鸿森园林有限公司","titlePercentDesc": "控股100%","children": []},{"id": "101","name": "成都交大房产投资管理有限公司","titlePercentDesc": "控股100%","children": []}]},{"id": "17","name": "测试单位11","titlePercentDesc": "","children": [{"id": "19","name": "测试企业名称","titlePercentDesc": "","children": []}]},{"id": "102","name": "成都眷诚经济技术开发总公司","titlePercentDesc": "","children": []},{"id": "103","name": "都江堰天马仁人科技文化发展有限公司","titlePercentDesc": "","children": []},{"id": "104","name": "成都嘉汇置业有限公司","titlePercentDesc": "","children": [{"id": "105","name": "成都恒置城市服务有限公司","titlePercentDesc": "","children": []}]},{"id": "106","name": "成都艾格机电设备有限责任公司","titlePercentDesc": "","children": []},{"id": "107","name": "成都天佑安全技术有限公司","titlePercentDesc": "","children": []}]},{"id": "14","name": "四川赛纳斯分析检测有限公司","titlePercentDesc": "","children": []},{"id": "22","name": "测试企业01","titlePercentDesc": "","children": []},{"id": "23","name": "四川国经科服人力资源集团有限公司","titlePercentDesc": "","children": [{"id": "91","name": "四川巴蜀档案信息技术有限公司","titlePercentDesc": "控股100%","children": []},{"id": "92","name": "四川省知行人力资源管理有限公司","titlePercentDesc": "控股100%","children": []},{"id": "93","name": "四川资育档案文化服务有限公司","titlePercentDesc": "控股100%","children": []},{"id": "94","name": "四川蓝宇档案管理服务有限公司","titlePercentDesc": "控股100%","children": []},{"id": "95","name": "四川省民意通统计师事务所有限公司","titlePercentDesc": "控股100%","children": []},{"id": "96","name": "四川全盛人才服务有限责任公司","titlePercentDesc": "控股100%","children": []}]},{"id": "25","name": "四川省川商西南冷鲜城实业有限公司","titlePercentDesc": "","children": []},{"id": "27","name": "企业测试数据","titlePercentDesc": "","children": []},{"id": "28","name": "0905测试企业（调整后）","titlePercentDesc": "","children": []},{"id": "29","name": "四川省国农投资管理有限责任公司","titlePercentDesc": "","children": []},{"id": "30","name": "川财证券有限责任公司","titlePercentDesc": "","children": []},{"id": "47","name": "四川省国祥时代实业有限公司","titlePercentDesc": "","children": [{"id": "48","name": "四川绿科果蔬饮品有限责任公司","titlePercentDesc": "","children": []}]},{"id": "49","name": "国铁（天津）股权投资合伙企业（有限合伙）","titlePercentDesc": "","children": []},{"id": "50","name": "四川菊乐食品股份有限公司","titlePercentDesc": "","children": []},{"id": "51","name": "四川现代农业园区投资经营有限公司","titlePercentDesc": "","children": [{"id": "52","name": "四川省国经鑫联供应链管理有限公司","titlePercentDesc": "","children": []}]},{"id": "53","name": "四川国康农庄农业有限责任公司","titlePercentDesc": "","children": []},{"id": "54","name": "四川行之智汇知识产权运营有限公司","titlePercentDesc": "","children": []},{"id": "55","name": "四川长兴资产管理有限公司","titlePercentDesc": "","children": []},{"id": "56","name": "四川国经资本控股有限公司","titlePercentDesc": "","children": [{"id": "57","name": "嘉兴凯佳投资合伙企业（有限合伙）","titlePercentDesc": "","children": []}]},{"id": "58","name": "四川国经创新投资管理有限公司","titlePercentDesc": "","children": [{"id": "59","name": "成都技转智石创业投资合伙企业（有限合伙）","titlePercentDesc": "","children": []},{"id": "60","name": "四川国经创新私募基金管理有限公司","titlePercentDesc": "","children": [{"id": "62","name": "四川国经经湖物业管理合伙企业（有限合伙）","titlePercentDesc": "","children": []},{"id": "63","name": "成都锦穗企业咨询合伙企业（有限合伙）","titlePercentDesc": "","children": []},{"id": "64","name": "淄博国经昆域股权投资基金合伙企业（有限合伙）","titlePercentDesc": "","children": []}]},{"id": "61","name": "成都助农金穗投资合伙企业（有限合伙）","titlePercentDesc": "","children": []},{"id": "65","name": "深圳市星禾恒胜投资合伙企业（有限合伙）","titlePercentDesc": "","children": []},{"id": "66","name": "成都未来创芯投资合伙企业（有限合伙）","titlePercentDesc": "","children": []},{"id": "67","name": "成都鲁信菁蓉贰期创业投资中心（有限合伙）","titlePercentDesc": "","children": []},{"id": "68","name": "成都绿霖教育投资合伙企业（有限合伙）","titlePercentDesc": "","children": []},{"id": "69","name": "成都技转智石股权投资基金管理有限公司","titlePercentDesc": "","children": []},{"id": "70","name": "成都市恒达成渝协同投资合伙企业（有限合伙）","titlePercentDesc": "","children": []},{"id": "71","name": "四川省国经数字科技投资合伙企业（有限合伙）","titlePercentDesc": "","children": []},{"id": "72","name": "四川国经星驰航空科技投资合伙企业（有限合伙）","titlePercentDesc": "","children": []},{"id": "73","name": "成都美吉金穗投资合伙企业（有限合伙）","titlePercentDesc": "","children": []},{"id": "74","name": "四川国经多闻科技投资合伙企业（有限合伙）","titlePercentDesc": "","children": []},{"id": "75","name": "海南国经新兴产业投资合伙企业（有限合伙）","titlePercentDesc": "","children": []},{"id": "76","name": "成都鲁信菁蓉创业投资中心（有限合伙）","titlePercentDesc": "","children": []},{"id": "77","name": "四川国经轨交科技投资合伙企业（有限合伙）","titlePercentDesc": "","children": []},{"id": "78","name": "绵阳科技城正昕新兴产业发展合伙企业（有限合伙）","titlePercentDesc": "","children": []}]},{"id": "79","name": "铁发战配（天津）股权投资合伙企业（有限合伙）","titlePercentDesc": "","children": []},{"id": "80","name": "济南量子实益股权投资管理中心（有限合伙）","titlePercentDesc": "","children": []},{"id": "81","name": "安徽华铁轨道交通产业基金合伙企业（有限合伙）","titlePercentDesc": "","children": []},{"id": "82","name": "四川招生考试信息资讯有限责任公司","titlePercentDesc": "","children": [{"id": "83","name": "四川金榜广告有限公司","titlePercentDesc": "","children": []},{"id": "84","name": "四川省招生考试图书发行有限责任公司","titlePercentDesc": "","children": []},{"id": "85","name": "四川锦兴教育咨询有限公司","titlePercentDesc": "","children": [{"id": "86","name": "四川锦兴国试书业有限公司","titlePercentDesc": "","children": []}]}]},{"id": "87","name": "四川省校校通工程有限公司","titlePercentDesc": "","children": [{"id": "88","name": "四川朵朵未来教育管理有限公司","titlePercentDesc": "","children": []},{"id": "89","name": "成都市锦江区朵朵花开艺术培训学校有限公司","titlePercentDesc": "","children": []}]},{"id": "90","name": "四川保创国经物业服务有限公司","titlePercentDesc": "","children": []},{"id": "97","name": "四川省外国企业服务有限责任公司","titlePercentDesc": "","children": []},{"id": "98","name": "四川发展资产管理有限公司","titlePercentDesc": "","children": []}]}// let data = dealData(data2);const rootNodeStyle = {fill: "#DCB363",stroke: "#CFBA86"};const quanziStyle = {fill: "#FEF8EC",stroke: "#F5E6CA"};const canguStyle = {fill: "#E3F8EA",stroke: "#B7D8B5"}const kongguStyle = {fill: "#E4F2EF",stroke: "#A2C0DA"}const defaultNodeStyle = {fill: "#A1C2F6",stroke: "#F6F6F6"}/*节点字体设置*/const commonFontStyle = {fontSize: 12,fill: 'rgba(0,0,0,0.65)'}const rootFontStyle = {fontSize: 15,fontWeight: "bolder",fill: "#FFFFFF"}G6.registerNode('guquanjiagou-root-tree-node',{drawShape: function drawShape(cfg, group) {const rect = group.addShape('rect', {attrs: {...rootNodeStyle,width:1,height: 1,lineWidth: 2},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'rect-shape',});const content = cfg.name;//cfg.name.replace(/(.{19})/g, '$1\n')const text = group.addShape('text', {attrs: {text: content,textAlign: 'left',textBaseline: 'middle',...rootFontStyle,},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape',});const bbox = text.getBBox();rect.attr({width: bbox.width + 26,height: 50,});text.attr({x: ((bbox.width + 26) - bbox.width)/2,y: 50/2})return rect;},update: (cfg, item) => {// const group = item.getContainer();// const icon = group.find((e) => e.get('name') === 'collapse-icon');// icon.attr('symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse);},},'single-node',);G6.registerNode('guquanjiagou-tree-node',{drawShape: function drawShape(cfg, group) {let realFill = "#666";let nodeStyle = defaultNodeStyle;if (cfg.titlePercentDesc && cfg.titlePercentDesc.indexOf("全资") > -1) {realFill = "orange";nodeStyle = quanziStyle;} else if (cfg.titlePercentDesc && cfg.titlePercentDesc.indexOf("控股") > -1) {realFill = "skyblue";nodeStyle = kongguStyle;} else if (cfg.titlePercentDesc && cfg.titlePercentDesc.indexOf("参股") > -1) {realFill = "green";nodeStyle = canguStyle;}const rect = group.addShape('rect', {attrs: {...nodeStyle,width:1,height: 1,lineWidth: 2},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'rect-shape',});const content = cfg.name && cfg.name.length < 18 ? cfg.name : cfg.name.substring(0, 18) + "...";//cfg.name.replace(/(.{19})/g, '$1\n')const text = group.addShape('text', {attrs: {text: content,textAlign: 'left',textBaseline: 'middle',fontSize: 10,fontWeight: "bolder",fill: '#666',},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape',});const bbox = text.getBBox();const text2 = group.addShape('text', {attrs: {text: cfg.titlePercentDesc,textBaseline: 'middle',fill: realFill,},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape2',});const hasChildren = cfg.children && cfg.children.length > 0;rect.attr({width: 200,height: 50,});text.attr({x: (200 - bbox.width)/2,y: 50/2})text2.attr({x: 200/2 + 10,y: -10,})if (hasChildren) {group.addShape('marker', {attrs: {x: 200/2 + 10,y: 50 + 10,r: 6,symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,stroke: '#666',lineWidth: 2,},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'collapse-icon',});}return rect;},update: (cfg, item) => {const group = item.getContainer();const icon = group.find((e) => e.get('name') === 'collapse-icon');icon.attr('symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse);},},'single-node',);G6.registerEdge('hvh', {draw(cfg, group) {const startPoint = cfg.startPoint;const endPoint = cfg.endPoint;const shape = group.addShape('path', {attrs: {lineWidth: 2,stroke: '#EBEBEB',path: [['M', startPoint.x, startPoint.y],//从开始节点的 开始锚点 移动画笔['L', startPoint.x, startPoint.y + (endPoint.y - startPoint.y)/2],// 移动到一二层级 的中间 画线['L', endPoint.x, startPoint.y + (endPoint.y - startPoint.y)/2],// 移动到终点节点的 结束锚点上方 画线['L', endPoint.x, endPoint.y] //画线到终点节点的 结束锚点],endArrow: {path: G6.Arrow.triangle(10, 20, 25),d: 25,fill: '#EBEBEB',//箭头边颜色stroke: '#EBEBEB',//箭头填充色}},// 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性name: 'path-shape',});return shape;},});/*悬浮时展示省略的公司名*/const tooltip = new G6.Tooltip({offsetX: 10,offsetY: 10,// the types of items that allow the tooltip show up// 允许出现 tooltip 的 item 类型itemTypes: ['node'],// custom the tooltip's content// 自定义 tooltip 内容getContent: (e) => {return e.item._cfg.model.name;},});const container = document.getElementById('container');const width = container.scrollWidth;const height = 800;//高度太低，顶级节点展示不全const graph = new G6.TreeGraph({container: 'container',width,height,linkCenter: true,fitCenter: true,plugins: [tooltip],modes: {default: [{type: 'collapse-expand',onChange: function onChange(item, collapsed) {const data = item.get('model');graph.updateItem(item, {collapsed,});data.collapsed = collapsed;return true;},},'drag-canvas','zoom-canvas',],},defaultNode: {type: "guquanjiagou-tree-node",anchorPoints: [[0.5, 0],[0.5, 1],],},defaultEdge: {type: 'hvh',// 定义开始节点。该边连入 source 点的第 0 个 anchorPoint，sourceAnchor: 0,// 定义结束节点。该边连入 target 点的第 1 个 anchorPoint，targetAnchor: 1,},layout: {type: 'compactBox',direction: 'TB',getId: function getId(d) {return d.id;},getHeight: function getHeight() {return 16;},getWidth: function getWidth() {return 16;},getVGap: function getVGap() {return 80;},getHGap: function getHGap() {return 100;},},});/* graph.node(function (node) {let position = 'right';let rotate = 0;if (!node.children) {position = 'bottom';rotate = Math.PI / 2;}return {label: node.id,labelCfg: {position,offset: 5,style: {rotate,textAlign: 'start',},},};});*/graph.data(data);graph.render();graph.fitView();var dropdown = layui.dropdown;// 渲染dropdown.render({elem: '.demo-dropdown-base', // 绑定元素选择器，此处指向 class 可同时绑定多个元素data: [{title: '二级',id: 0},{title: '三级',id: 1},{title: '四级',id: 2}],click: function(obj){this.elem.find('span').text(obj.title);const depth = obj.id;/*先全展开*/G6.Util.traverseTree(data, function (item) {// item.id = item.name;item.collapsed = false});// 然后展开指定层级G6.Util.traverseTree(data, function (item) {if (item.depth > depth) {//collapsed为true时默认收起item.collapsed = true}})// 传入数据graph.read(data)// 自适应graph.fitView()}});// 保存图片$("#savePic").off('click').on('click', function () {graph.downloadFullImage(false, false, { backgroundColor: 'white',padding: [30, 15, 15, 15]});})function dealData(data) {// 创建一个空对象来存储已经创建的节点，以便后续设置父子关系const nodeMap = {};// 定义一个函数来构建树节点function buildTreeNode(item) {const node = {id: item.sonId,name: item.sonName,titlePercentDesc: item.titlePercentDesc,children: []};if (item.sonName == "四川省国有资产经营投资管理有限责任公司") {node.type = "guquanjiagou-root-tree-node";}nodeMap[node.id] = node; // 将节点存储在映射中return node;}// 遍历数据数组，构建节点并设置父子关系let root = null; // 用于存储根节点（或多个根节点，如果需要的话）data.forEach(item => {const currentNode = buildTreeNode(item);if (item.id && item.id !== "") {// 如果当前节点有父ID，则将其添加到父节点的children数组中const parentNode = nodeMap[item.id];if (parentNode) {parentNode.children.push(currentNode);}} else {// 如果没有父ID（或者根据业务逻辑判断为根节点），则处理根节点// 在这个例子中，我们假设id和name都为空的节点（或只有一个为空，具体取决于你的数据）是根节点// 但这通常不是一个好的设计，因为更好的做法是为根节点提供一个有效的id// 由于你的数据中可能有多个这样的“根”节点（或多个没有父ID的节点），// 我们这里将它们存储在一个数组中，但你也可以根据需求选择其他处理方式if (!root) {root = currentNode; // 假设只有一个根节点，并直接赋值// 如果可能有多个根节点，则应该使用数组来存储它们：// if (!Array.isArray(root)) {// root = [root];// }// root.push(currentNode);} else if (Array.isArray(root)) {// 如果已经确定root是一个数组，则直接添加新节点root.push(currentNode);} else {// 如果之前已经设置了一个根节点，但现在又遇到了一个没有父ID的节点，// 你需要决定如何处理这种情况（例如，将root转换为数组，或抛出一个错误）// 这里我们简单地将root转换为数组并添加新节点root = [root, currentNode];}}});// 注意：上面的代码处理根节点的方式是基于你的数据可能包含多个根节点的假设。// 如果你的数据确实只有一个根节点，并且你可以通过其他方式确定它（比如id为某个特定值），// 那么你可以简化根节点的处理逻辑。// 由于在这个例子中我们不确定根节点的数量，我们保留了root可能是一个节点或一个数组的逻辑。// 如果你确定只有一个根节点，你可以在遍历数据之前先检查数据，找到那个没有父ID的节点，// 然后在遍历过程中只将其他节点添加到这个根节点的children数组中。// 输出树结构（如果root是数组，则输出所有根节点及其子树）return root[0];}/*默认展开第二级*/G6.Util.traverseTree(data, function (item) {// item.id = item.name;debuggerif (item.depth > 0) {//collapsed为true时默认收起item.collapsed = true}});// 传入数据graph.read(data)// 自适应graph.fitView()if (typeof window !== 'undefined')window.onresize = () => {if (!graph || graph.get('destroyed')) return;if (!container || !container.scrollWidth || !container.scrollHeight) return;graph.changeSize(container.scrollWidth, container.scrollHeight);};});});
</script>
</body>
</html>
树图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Tutorial Demo</title><!-- <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">--><link href="./js/layui/css/layui.css" rel="stylesheet">
</head>
<style>input.layui-input {height: 30px;}
</style>
<body style="position: relative">
<div style="width: 100%; height:10%;position: absolute;top: 5px" class="layui-form"><div class="layui-row layui-col-space5"><div class="layui-col-xs9"><div class="grid-demo grid-demo-bg1"> </div></div><div class="layui-col-xs2"><select id="danweiSelect" lay-filter="danwei-select-filter" lay-search="" layui-height="auto" ><option value="">筛选单位</option></select></div><div class="layui-col-xs1"><button type="button" id="qiyeSavePic" class="layui-btn layui-btn-primary layui-border layui-btn-sm" >保存图片</button></div></div>
</div>
<div id="qiyejiagoutu" style="width: 100%; height:100%;margin-top: 10px"></div><!--
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.24.10/babel.min.js"></script>-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/babel-core/6.1.19/browser.min.js"></script>-->
<!-- 如果你的代码使用了generator函数，你可能还需要引入 regenerator-runtime -->
<!-- <script src="https://cdn.jsdelivr.net/npm/regenerator-runtime/runtime.min.js"></script> -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>-->
<!--<script src="./js/g6.min.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/layui/layui.js"></script>-->
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
<script >layui.use(['form'], function(){var form = layui.form;fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')// /leatc/jiagoutu/qiyejiagoutu.jsp.then((res) => res.json()).then((data2) => {const data = {"children":[{"totalNumber":2,"children":[{"gqbl":"93.72%","dataType":"1","name":"四川发展（控股）有限责任公司","id":"71a0dd86-208f-44ac-9e52-c6a76bb7f667-892","type":"gudong-putong-tree-node","gdqc":"四川发展（控股）有限责任公司"},{"gqbl":"6.28%","dataType":"1","name":"四川省政府国有资产监督管理委员会","id":"e71d30e8-362b-4eaa-ba81-2dbc866511a6-893","type":"gudong-putong-tree-node","gdqc":"四川省政府国有资产监督管理委员会"}],"name":"股东","id":"gudong","type":"gudong-tree-node"},{"totalNumber":4,"children":[{"personName":"车伟","dataType":"2","name":"车伟(222)","id":"09eeac18-2449-4cd4-901d-bdaf214c6a01-19","type":"dongjiangao-putong-tree-node","zw":"222"},{"personName":"何立","dataType":"2","name":"何立(1111)","id":"b28fe37c-055a-4325-99f0-95a5015726e5-20","type":"dongjiangao-putong-tree-node","zw":"1111"},{"personName":"倪红","dataType":"2","name":"倪红(2111)","id":"547675f4-1bdc-4420-81d3-eb076cf0bf22-10","type":"dongjiangao-putong-tree-node","zw":"2111"},{"personName":"张宇","dataType":"2","name":"张宇(测试)","id":"872edf0a-fbb0-41c9-93dc-7b50b6d58427-10","type":"dongjiangao-putong-tree-node","zw":"测试"}],"name":"董监高","id":"dongjiangao","type":"dongjiangao-tree-node"},{"totalNumber":23,"children":[{"sjjewy":"实缴金额：3900000","gqbl":"49%","dataType":"3","name":"四川保创国经物业服务有限公司","id":"57ced4cb-4b01-4d39-ad9e-0569a536bb7c-838","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：142990000","gqbl":"12.03%","dataType":"3","name":"铁发战配（天津）股权投资合伙企业（有限合伙）","id":"e6858960-d612-47f4-9dd6-2f63bd92b81b-1077","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：31600000","gqbl":"46.01%","dataType":"3","name":"济南量子实益股权投资管理中心（有限合伙）","id":"92c9d6cd-daf9-4b68-a553-1ff0b4d1483e-1041","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：1000000000","gqbl":"39%","dataType":"3","name":"川财证券有限责任公司","id":"6c300e33-67d2-41c8-87ea-ea0c5f16f831-963","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：270633720","gqbl":"7.05%","dataType":"3","name":"安徽华铁轨道交通产业基金合伙企业（有限合伙）","id":"159da485-d095-4dcf-bf1e-626d9e466e66-956","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：69465924.45","gqbl":"48.4%","dataType":"3","name":"国铁（天津）股权投资合伙企业（有限合伙）","id":"a5380303-42b2-4a27-80e5-00f46212e642-952","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：2000000","gqbl":"35%","dataType":"3","name":"四川长兴资产管理有限公司","id":"90481b13-6965-4fd7-aa23-79e960d11adf-944","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：12356500","gqbl":"64.99%","dataType":"3","name":"四川赛纳斯分析检测有限公司","id":"b2c91c1f-cb2b-4613-a892-faaa93305ec5-934","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：21000000","gqbl":"47.62%","dataType":"3","name":"四川行之智汇知识产权运营有限公司","id":"89e859c6-98c3-4b01-a7bd-a07a05786459-931","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：92482842","gqbl":"8.78%","dataType":"3","name":"四川菊乐食品股份有限公司","id":"5c853fb9-79d3-4dc2-a67b-4c7948b61d56-920","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：5000000","gqbl":"51%","dataType":"3","name":"四川省校校通工程有限公司","id":"a23e8b83-96ec-4d1d-b9be-66a2394f1c4d-909","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：9330000","gqbl":"100%","dataType":"3","name":"四川省天财网络有限责任公司","id":"56f6de5c-d896-4ddb-b45f-fca503bee660-906","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：50000000","gqbl":"100%","dataType":"3","name":"四川省国祥时代实业有限公司","id":"843be998-ac27-4dac-bbbe-73c48e314b39-894","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：15678893300","gqbl":"72.07%","dataType":"3","name":"四川省国农投资管理有限责任公司","id":"71ed5af9-29ba-493f-a638-d362e8fe9cd5-890","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：100000000","gqbl":"100%","dataType":"3","name":"四川现代农业园区投资经营有限公司","id":"f537158e-cc42-4c0b-a287-f79212e5b831-887","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：10000000","gqbl":"75%","dataType":"3","name":"四川招生考试信息资讯有限责任公司","id":"d624846c-969b-49c4-b99f-d40a5423bc1b-883","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：300000000","gqbl":"100%","dataType":"3","name":"四川国经资本控股有限公司","id":"94923888-6e10-4b66-b5bf-4aefe821a49d-877","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：10000000","gqbl":"100%","dataType":"3","name":"四川国经科服人力资源集团有限公司","id":"96dcaa4a-863b-412d-befe-992e0a867c15-874","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：325658000","gqbl":"100%","dataType":"3","name":"四川国经扬华集团有限公司","id":"fd626565-b401-4d2c-b1f2-6f3fa8b4b155-867","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：70000000","gqbl":"100%","dataType":"3","name":"四川国经创新投资管理有限公司","id":"0d912f9a-cf2c-462c-88b2-2236f4cf9d6d-859","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：300000000","gqbl":"100%","dataType":"3","name":"四川国经兴农投资有限责任公司","id":"d58dec94-a4da-4c15-a3e7-75ade018c401-858","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：50000000","gqbl":"50%","dataType":"3","name":"四川国康农庄农业有限责任公司","id":"12e25aa0-ea31-4f77-95cf-f03640cebfef-853","type":"duiwaitouzi-putong-tree-node"},{"sjjewy":"实缴金额：5000000000","gqbl":"12%","dataType":"3","name":"四川发展资产管理有限公司","id":"66652423-6757-4195-bf69-632034e1d2b8-850","type":"duiwaitouzi-putong-tree-node"}],"name":"对外投资","id":"duiwaitouzi","type":"duiwaitouzi-tree-node"}],"dataType":"0","name":"四川省国有资产经营投资管理有限责任公司","id":"9ca15855-9a78-4dc5-95d4-42d6073b99dd-1","type":"root-tree-node"}// const data = data2;/** 根节点* */G6.registerNode('root-tree-node',{drawShape: function drawShape(cfg, group) {const rect = group.addShape('rect', {attrs: {fill: "#DCB363",stroke: "#CFBA86",x: 0,y: 0,width:1,height: 1},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'root-rect-shape',});const content = cfg.name ? cfg.name.replace(/(.{19})/g, '$1\n') : "无";const text = group.addShape('text', {attrs: {text: content,x: 0,y: 0,textAlign: 'left',textBaseline: 'middle',fontSize: 15,fontWeight: "bolder",fill: "#FFFFFF"},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'root-text-shape',});const bbox = text.getBBox();const hasChildren = cfg.children && cfg.children.length > 0;rect.attr({x: -bbox.width / 2 - 4,y: -bbox.height / 2 - 6,width: bbox.width + 12,height: bbox.height + 12,});text.attr({x: -bbox.width / 2,y: 0,lineHeight: bbox.height - 30})return rect;},update: (cfg, item) => {/* const group = item.getContainer();const icon = group.find((e) => e.get('name') === 'collapse-icon');icon.attr('symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse);*/},},'single-node',);/** 股东节点* */G6.registerNode('gudong-tree-node',{drawShape: function drawShape(cfg, group) {const rect = group.addShape('rect', {attrs: {fill: '#FFEDED',stroke: '#FFEDED',x: 0,y: 0,width:1,height: 1},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'rect-shape',});const keyShapeBbox = rect.getBBox();const content = cfg.name ? cfg.name.replace(/(.{19})/g, '$1\n') : "无";const text = group.addShape('text', {attrs: {text: "\t\t\t\t\t\t\t\t" + "股东",textAlign: 'left',textBaseline: 'middle',fill: '#666',fontSize: 15,fontWeight: "bolder",},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape',});const bbox = text.getBBox();bbox.width = 80;bbox.height = 50const text2 = group.addShape('text', {attrs: {text: "\n\n" + "\t(" +cfg.totalNumber + ")",x: 0,y: 0,textBaseline: 'middle',fill: "#666",},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape2',});const hasChildren = cfg.children && cfg.children.length > 0;rect.attr({x: -bbox.width / 2 - 4,y: -bbox.height / 2 - 6,width: bbox.width + (hasChildren ? 26 : 12),height: bbox.height + 12,});text.attr({x: -bbox.width / 2,y: 0})group.addShape('marker', {attrs: {x: bbox.width / 2 - 30,y: bbox.height/2 + 14,r: 6,symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,stroke: '#FFD9FA',lineWidth: 2,},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'collapse-icon',});return rect;},update: (cfg, item) => {const group = item.getContainer();const icon = group.find((e) => e.get('name') === 'collapse-icon');icon.attr('symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse);},},'single-node',);/** 董监高节点* */G6.registerNode('dongjiangao-tree-node',{drawShape: function drawShape(cfg, group) {const rect = group.addShape('rect', {attrs: {fill: '#E7F0FF',stroke: '#E7F0FF',x: 0,y: 0,width:1,height: 1},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'rect-shape',});const keyShapeBbox = rect.getBBox();const content = cfg.name ? cfg.name.replace(/(.{19})/g, '$1\n') : "无";const text = group.addShape('text', {attrs: {text: "\t\t\t\t\t\t" + "董监高",textAlign: 'left',textBaseline: 'middle',fill: '#666',fontSize: 15,fontWeight: "bolder",},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape',});const bbox = text.getBBox();bbox.width = 80;bbox.height = 50const text2 = group.addShape('text', {attrs: {text: "\n\n" + "(" +cfg.totalNumber + ")",x: 0,y: 0,textBaseline: 'middle',fill: "#666",},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape2',});const hasChildren = cfg.children && cfg.children.length > 0;rect.attr({x: -bbox.width / 2 - 4,y: -bbox.height / 2 - 6,width: bbox.width + (hasChildren ? 26 : 12),height: bbox.height + 12,});text.attr({x: -bbox.width / 2,y: 0})group.addShape('marker', {attrs: {x: bbox.width / 2 - 30,y: bbox.height/2 + 14,r: 6,symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,stroke: '#A0BAFF',lineWidth: 2,},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'collapse-icon',});return rect;},update: (cfg, item) => {const group = item.getContainer();const icon = group.find((e) => e.get('name') === 'collapse-icon');icon.attr('symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse);},},'single-node',);/** 对外投资节点* */G6.registerNode('duiwaitouzi-tree-node',{drawShape: function drawShape(cfg, group) {const rect = group.addShape('rect', {attrs: {fill: '#FBF1D8',stroke: '#FBF1D8',width:1,height: 1},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'rect-shape',});// const keyShapeBbox = rect.getBBox();// const content = cfg.name ? cfg.name.replace(/(.{19})/g, '$1\n') : "无";const text = group.addShape('text', {attrs: {text: "\t\t\t\t" + "对外投资",textAlign: 'left',textBaseline: 'middle',fill: '#666',fontSize: 15,fontWeight: "bolder",},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape',});const bbox = text.getBBox();bbox.width = 80;bbox.height = 50const text2 = group.addShape('text', {attrs: {text: "\n\n" + "(" + cfg.totalNumber + ")",x: 0,y: 0,textBaseline: 'middle',fill: "#666",},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape2',});const hasChildren = cfg.children && cfg.children.length > 0;rect.attr({x: -bbox.width / 2 - 4,y: -bbox.height / 2 - 6,width: bbox.width + (hasChildren ? 26 : 12),height: bbox.height + 12,});text.attr({x: -bbox.width / 2,y: 0})group.addShape('marker', {attrs: {x: bbox.width / 2 - 30,y: bbox.height/2 + 14,r: 6,symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,stroke: '#FBE0BD',lineWidth: 2,},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'collapse-icon',});return rect;},update: (cfg, item) => {const group = item.getContainer();const icon = group.find((e) => e.get('name') === 'collapse-icon');icon.attr('symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse);},},'single-node',);/** 股东普通节点* */G6.registerNode('gudong-putong-tree-node',{drawShape: function drawShape(cfg, group) {const rect = group.addShape('rect', {attrs: {fill: '#fff',stroke: '#FFC5CB',lineWidth: 2},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'rect-shape',});const content = cfg.name ? cfg.name.replace(/(.{19})/g, '$1\n') : "无";const text = group.addShape('text', {attrs: {text: cfg.name,textBaseline: 'middle',fontSize: 10,fontWeight: "bolder",fill: '#666',},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape',});const bbox = text.getBBox();const text2 = group.addShape('text', {attrs: {text: cfg.gqbl,textBaseline: 'middle',fontSize: 10,fontWeight: "bolder",fill: "#FFC5CB"},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape2',});const bbox2 = text2.getBBox();const text3 = group.addShape('text', {attrs: {text: "(",x: -bbox2.width - 15 ,y: (bbox.height + 12)/2 ,textBaseline: 'middle',fill: "black"},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape2',});const bbox3 = text3.getBBox();const text4 = group.addShape('text', {attrs: {text: ")",x: -15 + 5,y: (bbox.height + 12)/2 ,textBaseline: 'middle',fill: "black"},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape2',});const bbox4 = text4.getBBox();rect.attr({x: -(bbox.width + bbox2.width + 25),width: bbox.width + bbox2.width + 25,height: bbox.height + 12,});text.attr({x: -(bbox.width + bbox2.width) - 15,y: (bbox.height + 12)/2})text2.attr({x: (-bbox2.width - 15) + 5,y: (bbox.height + 12)/2})return rect;},update: (cfg, item) => {const group = item.getContainer();const icon = group.find((e) => e.get('name') === 'collapse-icon');icon.attr('symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse);},},'single-node',);/** 董监高普通节点* */G6.registerNode('dongjiangao-putong-tree-node',{drawShape: function drawShape(cfg, group) {const rect = group.addShape('rect', {attrs: {fill: '#fff',stroke: '#8CB7FF',lineWidth: 2},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'rect-shape',});const content = cfg.name ? cfg.name.replace(/(.{19})/g, '$1\n') : "无";const text = group.addShape('text', {attrs: {text: cfg.personName,textBaseline: 'middle',fontSize: 10,fontWeight: "bolder",fill: '#666',},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape',});const bbox = text.getBBox();const text2 = group.addShape('text', {attrs: {text: cfg.zw,textBaseline: 'middle',fontSize: 10,fontWeight: "bolder",fill: '#73A4F1',},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape',});const bbox2 = text2.getBBox();const text3 = group.addShape('text', {attrs: {text: "(",textBaseline: 'middle',fill: "black"},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape2',});const bbox3 = text3.getBBox();const text4 = group.addShape('text', {attrs: {text: ")",textBaseline: 'middle',fill: "black"},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape2',});const bbox4 = text4.getBBox();rect.attr({x: -(bbox.width + bbox2.width + 25),width: bbox.width + bbox2.width + 25,height: bbox.height + 12,});text.attr({x: -(bbox.width + bbox2.width + 25) + 10,y: (bbox.height + 12)/2});text2.attr({x: -(bbox2.width + 25) + 10 + 5,y: (bbox.height + 12)/2});text3.attr({x: -(bbox2.width + 25) + 10,y: (bbox.height + 12)/2});text4.attr({x: -25 + 10 + 5,y: (bbox.height + 12)/2});return rect;},update: (cfg, item) => {const group = item.getContainer();const icon = group.find((e) => e.get('name') === 'collapse-icon');icon.attr('symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse);},},'single-node',);/** 对外投资普通节点* */G6.registerNode('duiwaitouzi-putong-tree-node',{drawShape: function drawShape(cfg, group) {const rect = group.addShape('rect', {attrs: {fill: '#fff',stroke: '#F1DEBC',lineWidth: 2},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'rect-shape',});const content = cfg.name ? cfg.name.replace(/(.{25})/g, '$1\n') : "无";const text = group.addShape('text', {attrs: {text: content,x: 0,y: 0,textAlign: 'left',textBaseline: 'middle',fontSize: 10,fontWeight: "bolder",fill: '#666',},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape',});const bbox = text.getBBox();const text2 = group.addShape('text', {attrs: {text: cfg.gqbl,x: (bbox.width + 5) + 10 + 5 - 10,y: 15 ,textBaseline: 'middle',fontSize: 10,fontWeight: "bolder",fill: "#F1DEBC"},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape2',});const bbox2 = text2.getBBox();const text2Length = cfg.gqbl.length;//百分比的長度。用來決定是否产生括号if (text2Length != 0) {const text3 = group.addShape('text', {attrs: {text: "(",x: (bbox.width + 5) + 10 - 10,y: 15 ,textBaseline: 'middle',fill: "black"},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape2',});const bbox3 = text3.getBBox();const text4 = group.addShape('text', {attrs: {text: ")",x: ((bbox.width + 5) + 10 + 5) + bbox2.width + 2 - 10,y: 15 ,textBaseline: 'middle',fill: "black"},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape2',});/* const bbox4 = text4.getBBox();let text2Width = (bbox.width + bbox2.width) / 2 - 10; /!**计算括号位置*!/let text3Width = (bbox.width + bbox2.width) / 2 - 15;let text4Width = (bbox.width + bbox2.width) / 2 + 32;if (text2Length == 1) {text2Width = (bbox.width + bbox2.width) / 2;text3Width = (bbox.width + bbox2.width) / 2 - 5;text4Width = (bbox.width + bbox2.width) / 2 + 32;}text2.attr({x: text2Width,y: 0})text3.attr({x: text3Width,y: 0})text4.attr({x: text4Width,y: 0})*/}const text5 = group.addShape('text', {attrs: {text: cfg.sjjewy,x: 5,y: bbox.height + 5 + 15,textAlign: 'left',textBaseline: 'middle',fontSize: 8,fill: '#666',},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape',});const bbox5 = text5.getBBox();rect.attr({width: bbox.width + bbox2.width + 46,height: bbox.height + bbox2.height + bbox5.height + 12,});text.attr({x: 5,y: 15})return rect;},update: (cfg, item) => {const group = item.getContainer();const icon = group.find((e) => e.get('name') === 'collapse-icon');icon.attr('symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse);},},'single-node',);/** 普通节点* */G6.registerNode('qiyejiagoutu-tree-node',{drawShape: function drawShape(cfg, group) {const rect = group.addShape('rect', {attrs: {fill: '#fff',stroke: '#666',x: 0,y: 0,width:1,height: 1},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'rect-shape',});const content = cfg.name ? cfg.name.replace(/(.{19})/g, '$1\n') : "无";const text = group.addShape('text', {attrs: {text: content,x: 0,y: 0,textAlign: 'left',textBaseline: 'middle',fill: '#666',},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape',});const bbox = text.getBBox();let realFill = "#666";if (cfg.titlePercentDesc && cfg.titlePercentDesc.indexOf("全资") > -1) {realFill = "orange";} else if (cfg.titlePercentDesc && cfg.titlePercentDesc.indexOf("控股") > -1) {realFill = "skyblue";} else if (cfg.titlePercentDesc && cfg.titlePercentDesc.indexOf("参股") > -1) {realFill = "green";}const text2 = group.addShape('text', {attrs: {text: cfg.titlePercentDesc,x: -bbox.width / 2 - 50,y: -bbox.height / 2 -10 ,textBaseline: 'middle',fill: realFill,},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'text-shape2',});const hasChildren = cfg.children && cfg.children.length > 0;rect.attr({x: -bbox.width / 2 - 4,y: -bbox.height / 2 - 6,width: bbox.width + (hasChildren ? 26 : 12),height: bbox.height + 12,});text.attr({x: -bbox.width / 2,y: 0})if (hasChildren) {group.addShape('marker', {attrs: {x: bbox.width / 2 + 12,y: 0,r: 6,symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,stroke: '#666',lineWidth: 2,},// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item typename: 'collapse-icon',});}return rect;},update: (cfg, item) => {const group = item.getContainer();const icon = group.find((e) => e.get('name') === 'collapse-icon');icon.attr('symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse);},},'single-node',);G6.registerEdge('hvh', {draw(cfg, group) {const startPoint = cfg.startPoint;const endPoint = cfg.endPoint;let rightOffset = 0;if (cfg.target == 'duiwaitouzi' || cfg.source == 'duiwaitouzi') {//右侧节点边线补偿rightOffset = 40;}const shape = group.addShape('path', {attrs: {stroke: '#EBEBEB',lineWidth: 3,path: [['M', startPoint.x, startPoint.y],//从开始节点的 开始锚点 移动画笔['L', startPoint.x + (endPoint.x - startPoint.x)/2 + rightOffset, startPoint.y], //画线到终点节点的 结束锚点['L', startPoint.x + (endPoint.x - startPoint.x)/2 + rightOffset, (startPoint.y + (endPoint.y - startPoint.y))],['L', endPoint.x - 20 + rightOffset, (startPoint.y + (endPoint.y - startPoint.y))]],endArrow: {path: G6.Arrow.triangle(10, 20, 25),d: 25,fill: '#EBEBEB',//箭头边颜色stroke: '#EBEBEB',//箭头填充色}},// 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性name: 'path-shape',});return shape;},});const container = document.getElementById('qiyejiagoutu');const width = container.scrollWidth;const height = container.scrollHeight || 700;const graph = new G6.TreeGraph({container: 'qiyejiagoutu',width,height,fitCenter: true,modes: {default: [{type: 'collapse-expand',onChange: function onChange(item, collapsed) {const data = item.get('model');graph.updateItem(item, {collapsed,});data.collapsed = collapsed;return true;},},'drag-canvas','zoom-canvas',],},defaultNode: {type: 'qiyejiagoutu-tree-node',size: 26,anchorPoints: [[0, 0.5],[1, 0.5],],labelCfg: {style: {textAlign: 'right', // 设置为右对齐fill: '#000',fontSize: 14,},offsetX: -20, // 根据需要调整偏移量},},defaultEdge: {type: 'hvh',style: {lineWidth: 2,},},layout: {type: 'mindmap',direction: 'H',getHeight: () => {return 16;},getWidth: () => {return 16;},getVGap: () => {return 30;},getHGap: () => {return 150;},getSide: (d) => {if (d.id === 'duiwaitouzi') {return 'right';}return 'left';},},});graph.data(data);graph.render();graph.fitView();fetch('/leatc/jiagoutu/qiyejiagoutuDanwei.jsp')//https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json.then((res) => res.json()).then((danweiData) => {
/*const data = [{"id":"1","qymc":"四川省国有资产经营投资管理有限责任公司"},{"id":"18","qymc":"测试企业"},{"id":"28","qymc":"0905测试企业（调整后）"},{"id":"2","qymc":"四川省天财网络有限责任公司"},{"id":"3","qymc":"四川国经兴农投资有限责任公司"},{"id":"4","qymc":"四川兰田工业食品有限公司"},{"id":"7","qymc":"四川省信托投资公司"},{"id":"10","qymc":"四川省国际信托投资公司"},{"id":"12","qymc":"四川国经扬华集团有限公司"},{"id":"14","qymc":"四川赛纳斯分析检测有限公司"},{"id":"19","qymc":"测试企业名称"},{"id":"22","qymc":"测试企业01"},{"id":"23","qymc":"四川国经科服人力资源集团有限公司"},{"id":"24","qymc":"会理宜农土地综合整治有限责任公司"},{"id":"25","qymc":"四川省川商西南冷鲜城实业有限公司"},{"id":"27","qymc":"企业测试数据"},{"id":"29","qymc":"四川省国农投资管理有限责任公司"},{"id":"30","qymc":"川财证券有限责任公司"},{"id":"47","qymc":"四川省国祥时代实业有限公司"},{"id":"49","qymc":"国铁（天津）股权投资合伙企业（有限合伙）"},{"id":"50","qymc":"四川菊乐食品股份有限公司"},{"id":"51","qymc":"四川现代农业园区投资经营有限公司"},{"id":"53","qymc":"四川国康农庄农业有限责任公司"},{"id":"54","qymc":"四川行之智汇知识产权运营有限公司"},{"id":"55","qymc":"四川长兴资产管理有限公司"},{"id":"56","qymc":"四川国经资本控股有限公司"},{"id":"58","qymc":"四川国经创新投资管理有限公司"},{"id":"79","qymc":"铁发战配（天津）股权投资合伙企业（有限合伙）"},{"id":"80","qymc":"济南量子实益股权投资管理中心（有限合伙）"},{"id":"81","qymc":"安徽华铁轨道交通产业基金合伙企业（有限合伙）"},{"id":"82","qymc":"四川招生考试信息资讯有限责任公司"},{"id":"87","qymc":"四川省校校通工程有限公司"},{"id":"90","qymc":"四川保创国经物业服务有限公司"},{"id":"97","qymc":"四川省外国企业服务有限责任公司"},{"id":"98","qymc":"四川发展资产管理有限公司"}]
*/const data = danweiData;console.log(data);let str= "";for(var key in data){let item = data[key];let content = item.qymc;if (item.qymc.length > 10) {content = item.qymc.substring(0, 10) + "...";}str += '<option title="'+ item.qymc +'" value="'+ item.id +'" >'+ content +'</option>';}$("#danweiSelect").append(str);form.render('select');form.on('select(danwei-select-filter)', function(data){var companyId = data.value; // 获得被选中的值fetch('/leatc/jiagoutu/qiyejiagoutu.jsp?companyId=' + companyId).then((res) => res.json()).then((chooseDanweiData) => {graph.data(chooseDanweiData);graph.render();graph.fitView();})});});// 保存图片$("#qiyeSavePic").off('click').on('click', function () {graph.downloadFullImage(false, false, { backgroundColor: 'white',padding: [30, 15, 15, 15]});})if (typeof window !== 'undefined')window.onresize = () => {if (!graph || graph.get('destroyed')) return;if (!container || !container.scrollWidth || !container.scrollHeight) return;graph.changeSize(container.scrollWidth, container.scrollHeight);};});});
</script>
</body>
</html>