Antv关于G6树状图实现折叠

栏目: JavaScript · 发布时间: 5年前

内容简介：最近项目上有个小需求需要用到类似思维导图附带实现折叠效果。于是网上扒拉扒拉大多数还是d3.js，但是浏览 d3.js后发现配置太多太繁琐就放弃了。后来就在我大金网上看到了antv (默默的心里说一句安ant六批啊...)首先实现思路最主要的就是实现点击隐藏再次点击时显示所以我们需要一个函数暂定为toggle然后我们在看antv给我们的示例代码:

最近项目上有个小需求需要用到类似思维导图附带实现折叠效果。于是网上扒拉扒拉大多数还是d3.js，但是浏览 d3.js后发现配置太多太繁琐就放弃了。后来就在我大金网上看到了antv (默默的心里说一句安ant六批啊...)

2 技巧/思路

首先实现思路最主要的就是实现点击隐藏再次点击时显示所以我们需要一个函数暂定为toggle

function toggle(d) {
	
} 
复制代码

然后我们在看antv给我们的示例代码:

G6.registerNode('treeNode', {
	anchor: [[0, 0.5], [1, 0.5]]
});
G6.registerEdge('smooth', {
	getPath: function getPath(item) {
		var points = item.getPoints();
		var start = points[0];
		var end = points[points.length - 1];
		var hgap = Math.abs(end.x - start.x);
		if (end.x > start.x) {
			return [['M', start.x, start.y], ['C', start.x + hgap / 4, start.y, end.x - hgap / 2, end.y, end.x, end.y]];
		}
		return [['M', start.x, start.y], ['C', start.x - hgap / 4, start.y, end.x + hgap / 2, end.y, end.x, end.y]];
	}
});
var layout = new G6.Layouts.CompactBoxTree({
	//direction: 'LR', // 方向（LR/RL/H/TB/BT/V）
	getHGap: function getHGap() /* d */ {
		// 横向间距
		return 100;
	},
	getVGap: function getVGap() /* d */ {
		// 竖向间距
		return 10;
	}
});
var tree = new G6.Tree({
	renderer: 'svg',
	id: 'mountNode', // 容器ID
	height: window.innerHeight, // 画布高
	layout: layout,
	model: ['mouseEnterFillRed'],
	fitView: 'autoZoom' // 自动缩放
});
tree.node({
	shape: 'treeNode',
	size: 8,
	label: function label(model) {
		if (model.children && model.children.length > 0) {
			return {
				text: model.name,
				textAlign: 'right',
				color: "#0F0"
			};
		}
		return {
			text: model.name,
			textAlign: 'left',
			color: "#F00"
		};
	},
	labelOffsetX: function labelOffsetX(model) {
		if (model.children && model.children.length > 0) {
			return -10;
		}
		return 10;
	}
})
tree.edge({
	shape: 'smooth'
});
tree.read({
	roots: [data]
});
复制代码

tree.read（）方法告诉我们填入渲染数据，然后造一点假数据

const data = {
	"id": "17",
	"name": "proName",
	"children": [
		{
			"id": "18",
			"name": "前期准备阶段",
			"warning": "true",
			"layer": "1",
			"children": [
				{"id": "19", "name": "前期调研",href: "dyurl","layer": "2"},
				{"id": "20", "name": "指标设计",href: "zburl", "layer": "2"},
				{"id": "23", "name": "问卷设计",href: "wjurl", "layer": "2"},
				{"id": "24", "name": "方案撰写",href: "faurl", "layer": "2"},
			]
		},
		{
		    "id": "28", 
		    "name": "指标评价阶段", 
		    "layer": "1", 
		    "children": [
		        {"id": "21", "name": "初步评价阶段"},
		        {"id": "22", "name": "专家评分"},
		        {"id": "30", "name": "问卷分析"}
		    ]
		},
		{
		    "id": "29", 
		    "name": "结果报告阶段",
		    "children": [
				{"id": "31", "name": "指标评分"},
				{"id": "32", "name": "报告撰写"},
			]
		}
	]
}
复制代码

其余的方法如registerEdge registerNode等 文档写的还是比较全的。然后运行代码预览：

Antv关于G6树状图实现折叠

下一步为节点添加事件：参考文档自定义交互 代码如下： 

// 注册节点事件
	tree.on('node:click', (ev)=> {
		//注册点击事件后调用toggle函数
		console.log('-->', ev)
		toggle(ev.item.model)
	})
//toggle函数
function toggle(d) {
    //  判断节点数据是否存在children 存在就将数据保存在_children下
	if(d.children !== null) {
		d._children = d.children
		d.children = null
	}else  {
		d.children = d._children
		d._children = null
	}
}
复制代码

现在toggle函数已经写好了，点击后节点数据也发生改变。最后要做的就是将改变的数据更新到视图中。查询相关文档找到 ***graph.update(item, model)***。tree又继承于graph 于是有如下：

function toggle(d) {
	if(d.children !== null) {
		d._children = d.children
		d.children = null
	}else  {
		d.children = d._children
		d._children = null
	}
	tree.update(tree.find(d.id), {
	    //节点是否折叠 collapsed
		collapsed: d.children?false:true
	})
}
复制代码

至此树状图实现点击隐藏的功能完成。 完整代码如下：

componentDidMount() {
		const data = {
			"id": "17",
			"name": "proName",
			"layer": "10",
			"current": "true",
			"children": [
					{
							"id": "18",
							"name": "前期准备阶段",
							"warning": "true",
							"layer": "1",
							"children": [
									{"id": "19", "name": "前期调研",href: "dyurl","layer": "2"},
									{"id": "20", "name": "指标设计",href: "zburl", "layer": "2"},
									{"id": "23", "name": "问卷设计",href: "wjurl", "layer": "2"},
									{"id": "24", "name": "方案撰写",href: "faurl", "layer": "2"},
							]},
					{"id": "28", "name": "指标评价阶段", "layer": "1", "children": [
					 
						 
							{"id": "21", "name": "初步评价阶段",href: "cpurl", "layer": "2"},
							{"id": "22", "name": "专家评分",href: "zjurl", "layer": "2"},
							{"id": "30", "name": "问卷分析",href: "fxurl", "layer": "2"},

					]},
					{"id": "29", "name": "结果报告阶段","layer": "1", "children": [
						 
							{"id": "31", "name": "指标评分",href: "zbpfurl", "layer": "2"},
							{"id": "32", "name": "报告撰写",href: "bgurl", "layer": "2"},
					]
					}
			]
		}
		G6.registerNode('treeNode', {
			anchor: [[0, 0.5], [1, 0.5]]
		});
		G6.registerEdge('smooth', {
			getPath: function getPath(item) {
				var points = item.getPoints();
				var start = points[0];
				var end = points[points.length - 1];
				var hgap = Math.abs(end.x - start.x);
				if (end.x > start.x) {
					return [['M', start.x, start.y], ['C', start.x + hgap / 4, start.y, end.x - hgap / 2, end.y, end.x, end.y]];
				}
				return [['M', start.x, start.y], ['C', start.x - hgap / 4, start.y, end.x + hgap / 2, end.y, end.x, end.y]];
			}
		});
		var layout = new G6.Layouts.CompactBoxTree({
			//direction: 'LR', // 方向（LR/RL/H/TB/BT/V）
			getHGap: function getHGap() /* d */ {
				// 横向间距
				return 100;
			},
			getVGap: function getVGap() /* d */ {
				// 竖向间距
				return 10;
			},
			nodeSep: function() {
				// 节点间距

			},
			nodeSize: ()=> {
				//节点大小
			},
			subTreeSep: ()=> {
				// 子树间隔
			}
		});
		var tree = new G6.Tree({
			renderer: 'svg',
			id: 'mountNode', // 容器ID
			height: window.innerHeight, // 画布高
			layout: layout,
			model: ['mouseEnterFillRed'],
			fitView: 'autoZoom' // 自动缩放
		});
		tree.node({
			shape: 'treeNode',
			size: 8,
			label: function label(model) {
				if (model.children && model.children.length > 0) {
					return {
						text: model.name,
						textAlign: 'right',
						color: "#0F0"
					};
				}
				return {
					text: model.name,
					textAlign: 'left',
					color: "#F00"
				};
			},
			labelOffsetX: function labelOffsetX(model) {
				if (model.children && model.children.length > 0) {
					return -10;
				}
				return 10;
			}
		})
		tree.edge({
			shape: 'smooth'
		});
		tree.read({
			roots: [data]
		});

		// 注册节点事件
		tree.on('node:click', (ev)=> {
			console.log('ononono===>', ev.item.getModel().collapsed)
			toggle(ev.item.model)
		})
	// 数据筛选
	function toggle(d) {
		if(d.children !== null) {
			d._children = d.children
			d.children = null
		}else  {
			d.children = d._children
			d._children = null
		}
		tree.update(tree.find(d.id), {
			collapsed: d.children?false:true
		})
		
	}
}
render() {
	return(
		<div>
			<div id="mountNode" ></div>
		</div>
	)
}
复制代码

效果图：

Antv关于G6树状图实现折叠

第一次写文章做得不好的地方希望大佬多多见谅...


以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
物联网导论（第2版）

物联网导论（第2版）

刘云浩 / 科学出版社 / 2013-8 / 45.00元

物联网是一个基于互联网、传统电信网等信息承载体，让所有能够被独立寻址的普通物理对象实现互联互通的网络。它具有普通对象设备化、自治终端互联化和普适服务智能化三个重要特征。 《物联网工程专业系列教材：物联网导论（第2版）》从物联网的感知识别层、网络构建层、管理服务层和综合应用层这四层分别进行阐述，深入浅出地为读者拨开萦绕于物联网这个概念的重重迷雾，引领求知者渐渐步入物联网世界，帮助探索者把握第三......一起来看看 《物联网导论（第2版）》 这本书的介绍吧!

码农工具
HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3