Antv关于G6树状图实现折叠

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

内容简介：最近项目上有个小需求需要用到类似思维导图附带实现折叠效果。于是网上扒拉扒拉大多数还是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树状图实现折叠

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


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

查看所有标签

猜你喜欢:

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

码农书籍
代码本色：用编程模拟自然系统

代码本色：用编程模拟自然系统

Daniel Shiffman / 周晗彬 / 人民邮电出版社 / 2014-10 / 99.00元

本书介绍了用计算机模拟自然系统涉及的编程策略与技术，涵盖了基本的数学和物理概念，以及可视化地展示模拟结果所需的高级算法。读者将从构建基本的物理引擎开始，一步一步地学习如何创建智能移动的物体和复杂的系统，为进一步探索生成设计奠定基础。相关的知识点包括力、三角、分形、细胞自动机、自组织和遗传算法。本书的示例使用基于Java的开源语言及开发环境Processing编写。本书网站http://www.na......一起来看看 《代码本色：用编程模拟自然系统》 这本书的介绍吧!

码农工具
JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具

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