当前位置：首页 > news >正文

antv g6问题处理汇总

news 2024/10/25 10:43:06

关于自定义边时，箭头始终没出现的问题处理

问题：
在这里插入图片描述
问题对应的代码

解决方法：将箭头的偏移量调整y坐标。简单来说就是调整triangle方法的偏移量参数，箭头位置会上下移动

在这里插入图片描述

完整代码

<!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">&nbsp;</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="./js/minified.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="./js/dist/guquanjiagoutuNew.js"></script>
</body>
</html>

"use strict";function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }function myFetch(url, successCallback) {return $.ajax({url: url,type: 'GET',// 请求方法dataType: 'json',// 期望返回的数据类型success: function success(data) {successCallback(data); // 成功时解析数据},error: function error(xhr, status, _error) {console.log('请求失败: ' + _error)}});;
}
/** 文字实现竖向排列效果* */
function addNewlineAfterEachCharacter(str) {// 使用数组的 reduce 方法来构建新字符串// 初始值为空字符串 ''return str.split('').reduce((acc, char) => {// 将当前字符和换行符添加到累加器中// 然后返回累加器以用于下一次迭代return acc + char + '\n';}, '');
}layui.use(function () {myFetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json',function (data2) { //   /leatc/jiagoutu/guquanjiagoutuExample.jspvar 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": []}]};// var data = dealData(data2);var rootNodeStyle = {fill: "#DCB363",stroke: "#CFBA86"};var quanziStyle = {fill: "#FEF8EC",stroke: "#F5E6CA"};var canguStyle = {fill: "#E3F8EA",stroke: "#B7D8B5"};var kongguStyle = {fill: "#E4F2EF",stroke: "#A2C0DA"};var defaultNodeStyle = {fill: "#A1C2F6",stroke: "#F6F6F6"};/*节点字体设置*/var commonFontStyle = {fontSize: 12,fill: 'rgba(0,0,0,0.65)'};var rootFontStyle = {fontSize: 15,fontWeight: "bolder",fill: "#FFFFFF"};G6.registerNode('guquanjiagou-root-tree-node', {drawShape: function drawShape(cfg, group) {var rect = group.addShape('rect', {attrs: _objectSpread(_objectSpread({}, 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'});var content = cfg.name; //cfg.name.replace(/(.{19})/g, '$1\n')var text = group.addShape('text', {attrs: _objectSpread({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'});var 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: function update(cfg, item) {// var group = item.getContainer();// var icon = group.find(function (e) {//   return 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) {var realFill = "#666";var 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;}var rect = group.addShape('rect', {attrs: _objectSpread(_objectSpread({}, 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'});var content = cfg.name && cfg.name.length < 18 ? cfg.name : cfg.name.substring(0, 18) + "..."; //cfg.name.replace(/(.{19})/g, '$1\n')var text = group.addShape('text', {attrs: {text: addNewlineAfterEachCharacter(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'});var bbox = text.getBBox();var 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'});var hasChildren = cfg.children && cfg.children.length > 0;rect.attr({width: 50,height: 200,opacity: 0.1});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: function update(cfg, item) {var group = item.getContainer();var icon = group.find(function (e) {return e.get('name') === 'collapse-icon';});icon.attr('symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse);}}, 'single-node');G6.registerEdge('hvh', {draw: function draw(cfg, group) {var startPoint = cfg.startPoint;var endPoint = cfg.endPoint;var 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, 100),d: 100,fill: '#EBEBEB',//箭头边颜色stroke: '#EBEBEB' //箭头填充色}},// 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性name: 'path-shape'});return shape;}});/*悬浮时展示省略的公司名*/var 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: function getContent(e) {return e.item._cfg.model.name;}});var container = document.getElementById('container');var width = container.scrollWidth;var height = 800; //高度太低，顶级节点展示不全var graph = new G6.TreeGraph({container: 'container',width: width,height: height,linkCenter: true,fitCenter: true,plugins: [tooltip],modes: {"default": [{type: 'collapse-expand',onChange: function onChange(item, collapsed) {var data = item.get('model');graph.updateItem(item, {collapsed: 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 150;},getHGap: function getHGap() {return 100;}}});/*                graph.node(function (node) {var position = 'right';var 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 click(obj) {this.elem.find('span').text(obj.title);var 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) {// 创建一个空对象来存储已经创建的节点，以便后续设置父子关系var nodeMap = {};// 定义一个函数来构建树节点function buildTreeNode(item) {var 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;}// 遍历数据数组，构建节点并设置父子关系var root = null; // 用于存储根节点（或多个根节点，如果需要的话）data.forEach(function (item) {var currentNode = buildTreeNode(item);if (item.id && item.id !== "") {// 如果当前节点有父ID，则将其添加到父节点的children数组中var 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;if (item.depth > 0) {//collapsed为true时默认收起item.collapsed = true;}});// 传入数据graph.read(data);// 自适应graph.fitView();if (typeof window !== 'undefined') window.onresize = function () {if (!graph || graph.get('destroyed')) return;if (!container || !container.scrollWidth || !container.scrollHeight) return;graph.changeSize(container.scrollWidth, container.scrollHeight);};});
});

自定义边后，边的起点在矩形内部，而不是默认的锚点问题处理

问题效果：
在这里插入图片描述
这会导致如果节点不是这种长条形矩形，外连接线长度看起来长度不同
代码：

解决方案：
在这里插入图片描述
效果图：

<!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">&nbsp;</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="./js/minified.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="./js/dist/guquanjiagoutuNew.js"></script>
</body>
</html>

"use strict";function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }function myFetch(url, successCallback) {return $.ajax({url: url,type: 'GET',// 请求方法dataType: 'json',// 期望返回的数据类型success: function success(data) {successCallback(data); // 成功时解析数据},error: function error(xhr, status, _error) {console.log('请求失败: ' + _error)}});;
}
/** 文字实现竖向排列效果* */
function addNewlineAfterEachCharacter(str) {// 使用数组的 reduce 方法来构建新字符串// 初始值为空字符串 ''return str.split('').reduce((acc, char) => {// 将当前字符和换行符添加到累加器中// 然后返回累加器以用于下一次迭代return acc + char + '\n';}, '');
}layui.use(function () {myFetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json',function (data2) { //   /leatc/jiagoutu/guquanjiagoutuExample.jspvar 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": []}]};// var data = dealData(data2);var rootNodeStyle = {fill: "#DCB363",stroke: "#CFBA86"};var quanziStyle = {fill: "#FEF8EC",stroke: "#F5E6CA"};var canguStyle = {fill: "#E3F8EA",stroke: "#B7D8B5"};var kongguStyle = {fill: "#E4F2EF",stroke: "#A2C0DA"};var defaultNodeStyle = {fill: "#A1C2F6",stroke: "#F6F6F6"};/*节点字体设置*/var commonFontStyle = {fontSize: 12,fill: 'rgba(0,0,0,0.65)'};var rootFontStyle = {fontSize: 15,fontWeight: "bolder",fill: "#FFFFFF"};G6.registerNode('guquanjiagou-root-tree-node', {drawShape: function drawShape(cfg, group) {var rect = group.addShape('rect', {attrs: _objectSpread(_objectSpread({}, 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'});var content = cfg.name; //cfg.name.replace(/(.{19})/g, '$1\n')var text = group.addShape('text', {attrs: _objectSpread({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'});var bbox = text.getBBox();rect.attr({y: 200,width: bbox.width + 26,height: 50});text.attr({x: (bbox.width + 26 - bbox.width) / 2,y: 50 / 2 + 200});return rect;},update: function update(cfg, item) {// var group = item.getContainer();// var icon = group.find(function (e) {//   return 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) {var realFill = "#666";var 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;}var rect = group.addShape('rect', {attrs: _objectSpread(_objectSpread({}, 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'});// cfg.name = "四川省国有资产经营投资管理有限责任公司四川省国有资产经营投资管理有限责任公司";var content = cfg.name && cfg.name.length <= 25 ? cfg.name : cfg.name.substring(0, 25) + "..."; //cfg.name.replace(/(.{19})/g, '$1\n')var text = group.addShape('text', {attrs: {text: addNewlineAfterEachCharacter(content),textAlign: 'left',textBaseline: 'top',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'});var bbox = text.getBBox();var 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'});var hasChildren = cfg.children && cfg.children.length > 0;rect.attr({width: 50,height: 350,opacity: 0.1});text.attr({x: (50 - bbox.width) / 2,//水平居中在矩形框内y: 20//距离矩形上边框20});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: function update(cfg, item) {var group = item.getContainer();var icon = group.find(function (e) {return e.get('name') === 'collapse-icon';});icon.attr('symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse);}}, 'single-node');G6.registerEdge('hvh', {draw: function draw(cfg, group) {var sourceNode = cfg.sourceNode;var startPoint = cfg.startPoint;var endPoint = cfg.endPoint;var shape = group.addShape('path', {attrs: {lineWidth: 2,stroke: '#EBEBEB',path: [['M', startPoint.x, startPoint.y + sourceNode._cfg.bboxCache.height/2],//从开始节点的 开始锚点 移动画笔['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, 190),d: 190,fill: '#EBEBEB',//箭头边颜色stroke: '#EBEBEB' //箭头填充色}},// 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性name: 'path-shape'});return shape;}});/*悬浮时展示省略的公司名*/var 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: function getContent(e) {return e.item._cfg.model.name;}});var container = document.getElementById('container');var width = container.scrollWidth;var height = 800; //高度太低，顶级节点展示不全var graph = new G6.TreeGraph({container: 'container',width: width,height: height,linkCenter: true,fitCenter: true,plugins: [tooltip],modes: {"default": [{type: 'collapse-expand',onChange: function onChange(item, collapsed) {var data = item.get('model');graph.updateItem(item, {collapsed: 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 350;},getHGap: function getHGap() {return 100;}}});/*                graph.node(function (node) {var position = 'right';var 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 click(obj) {this.elem.find('span').text(obj.title);var 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) {// 创建一个空对象来存储已经创建的节点，以便后续设置父子关系var nodeMap = {};// 定义一个函数来构建树节点function buildTreeNode(item) {var 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;}// 遍历数据数组，构建节点并设置父子关系var root = null; // 用于存储根节点（或多个根节点，如果需要的话）data.forEach(function (item) {var currentNode = buildTreeNode(item);if (item.id && item.id !== "") {// 如果当前节点有父ID，则将其添加到父节点的children数组中var 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;if (item.depth > 0) {//collapsed为true时默认收起item.collapsed = true;}});// 传入数据graph.read(data);// 自适应graph.fitView();if (typeof window !== 'undefined') window.onresize = function () {if (!graph || graph.get('destroyed')) return;if (!container || !container.scrollWidth || !container.scrollHeight) return;graph.changeSize(container.scrollWidth, container.scrollHeight);};});
});