AntV-G6：画直角树形图

效果图

安装&引用js

安装和引用教程：

https://g6.antv.vision/zh/docs/manual/getting-started/#%E5%AE%89%E8%A3%85--%E5%BC%95%E7%94%A8

>>引用方式

1、在线引用

2、本地引用

代码块

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>树图-边上显示label</title><style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body><div id="TreeChart"></div><!--画图容器-->
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="g6.js"></script><script>//假数据var treedata = {isRoot: true,//是否根节点id: '73efd8a3-85dc-4a06-b61d-2c51aceaf28b',shape: 'image',//类型img:'/Scripts/plugins/AntV/1.png',//图片链接地址label: '系统管理员',//标签children: [{//树节点父子关系id: 'SubTreeNode1',shape: 'image',img:'/Scripts/plugins/AntV/1.png',label: '张三',style: {//自定义样式cursor: 'pointer'//光标：手指},raw: {},children: [{id: 'SubTreeNode1.1',shape: 'image',img:'/Scripts/plugins/AntV/1.png',label: '李四',},{id: 'SubTreeNode1.2',shape: 'image',img:'/Scripts/plugins/AntV/1.png',label: '王五',children: [{id: 'SubTreeNode1.2.1',shape: 'image',img:'/Scripts/plugins/AntV/1.png',label: '张三',}, {id: 'SubTreeNode1.2.2',shape: 'image',img:'/Scripts/plugins/AntV/1.png',label: '李四',}, {id: 'SubTreeNode1.2.3',shape: 'image',img:'/Scripts/plugins/AntV/1.png',label: '王五',}]}]}, {id: 'SubTreeNode2',shape: 'image',img:'/Scripts/plugins/AntV/1.png',label: 'zyz',children: [{id: 'SubTreeNode2.1',shape: 'image',img:'/Scripts/plugins/AntV/1.png',label: '王五',}]}, {id: 'SubTreeNode3',shape: 'image',img:'/Scripts/plugins/AntV/2.png',label: '李四',children: [{id: 'SubTreeNode3.1',shape: 'image',img:'/Scripts/plugins/AntV/2.png',label: '张三',}, {id: 'SubTreeNode3.2',shape: 'image',img:'/Scripts/plugins/AntV/2.png',label: '李四',}, {id: 'SubTreeNode3.3',shape: 'image',img:'/Scripts/plugins/AntV/2.png',label: '王五',}]}, ]};//初始化定义var graph = new G6.TreeGraph({container: 'TreeChart', //容器width: window.innerWidth, //返回窗口的文档显示区的高度height: window.innerHeight,pixelRatio: 2,linkCenter: true,modes: {default: ['drag-canvas', 'zoom-canvas']},defaultNode: {size: 30},nodeStyle: {default: {fill: '#40a9ff',stroke: '#096dd9'}},edgeStyle: {default: {stroke: '#A3B1BF'}},layout: {type: 'compactBox',direction: 'LR',getId: function getId(d) {return d.id;},getHeight: function getHeight() {return 16;},getWidth: function getWidth() {return 16;},getVGap: function getVGap() {return 50;},getHGap: function getHGap() {return 100;}}});//定义节点graph.node(function(node) {return {size: 36,anchorPoints: [[0, 0.5], [1, 0.5]],style: {fill: '#40a9ff',stroke: '#096dd9'},//label: node.id,labelCfg: {position: 'top'}};});var i = 0;//定义连线graph.edge(function() {i++;return {shape: 'line-arrow',//polylinecolor: '#A3B1BF',//label: i};});G6.registerEdge('line-arrow', {getPath: function getPath(points) {var startPoint = points[0];var endPoint = points[1];return [['M', startPoint.x, startPoint.y], ['L', endPoint.x / 3 + 2 / 3 * startPoint.x, startPoint.y], ['L', endPoint.x / 3 + 2 / 3 * startPoint.x, endPoint.y], ['L', endPoint.x, endPoint.y]];},getShapeStyle: function getShapeStyle(cfg) {var startPoint = cfg.startPoint;var endPoint = cfg.endPoint;var controlPoints = this.getControlPoints(cfg);var points = [startPoint]; // 添加起始点// 添加控制点if (controlPoints) {points = points.concat(controlPoints);}// 添加结束点points.push(endPoint);var path = this.getPath(points);var style = G6.Util.mix({}, G6.Global.defaultEdge.style, {stroke: '#BBB',lineWidth: 1,path: path,startArrow: {path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z',d: 6},endArrow: {path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z',d: 6}}, cfg.style);return style;}}, 'line');graph.data(treedata);graph.render();graph.fitView();</script>
</body>
</html>

代码内容描述

>>定位高度

document.documentElement.clientHeight；//页面html标签的高度，即浏览器高度

document.body.clientHeight；//页面body标签的高度，即所有内容高度

window.innerHeight；//返回窗口的文档显示区的高度

>>图形定义（详见API）

https://g6.antv.vision/zh/docs/api/TreeGraph

快速上手&简单示例&在线演示编辑器

https://g6.antv.vision/zh/docs/manual/getting-started

AntV-G6：画直角树形图相关推荐

Vuex和antv/g6实现在线绘制分析流程图功能
流程图绘制在项目中实际是一个复杂的应用,但是因为有很多算法都是和项目中业务相关不一定符合其他小伙伴的实际应用情况并且项目存在保密机制不方便全部分享出来,所以本文章仅抽取最基础的部分简单介绍流程图创建. ...
antv g6 禁止移动_antV G6流程图在Vue中的使用
最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...
vue office在线编辑_VUE和Antv G6实现在线拓扑图编辑
我使用的是G6 2.0,也可以使用 G6 3.0,3.0的拓扑图单独作为一个编辑器使用,使用更加方便.不过2.0的比较简单,容易上手. 1.首先在Antv官网上找到蚂蚁Antv G6插件,引入插件. ...
antv g6 禁止移动_十 AntV
← Highcharts AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便.专业可靠.无限可能的数据可视化最佳实践. AntV 包括以下解决方案: G2:可视化引擎 G2Plot ...
vue中使用antv/g6 绘制关系图、结构图
使用antv/g6绘制关系图效果图代码实现 npm install @antv/g6 --save <template><div id="app">&l ...
关系图 antv G6
1.安装antv G6 npm install --save @antv/g6 # 或者 # pnpm install --save @antv/g6 2.引入antv G6 import G6 fr ...
antv G6 + react umi(vue,ng) 实现节点红点（badges）
在我们使用G6做知识图谱,topo图时,业务场景一般会涉及到告警的节点要有突出标识,所谓红点,因为G6内置是不自带此功能的(虽然Graphin是可以直接用的,但基于G6的react框架),这样我们可以 ...
ANTV/G6 绘制网络拓扑图
最近看其他项目绘制网络拓扑图用了vue-super-flow 绘制的不是太理想,所以自己研究了一下,尝试用antv/g6绘制了一下. 参看了官方api https://g6.antv.vision/z ...
AntV G6将节点修改成图片
1.在每个节点中添加图片代码布局如下: 实现效果如下图: 主要代码: defaultNode: { // 节点样式修改type: 'image', // 设置节点为图片size: [40, 40] ...

AntV-G6：画直角树形图

AntV-G6：画直角树形图相关推荐

最新文章

热门文章