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等 文档写的还是比较全的。然后运行代码预览：
下一步为节点添加事件：参考文档自定义交互 代码如下：
// 注册节点事件
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>
)
}
复制代码
效果图：
第一次写文章做得不好的地方希望大佬多多见谅...
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 立体折叠相册效果
- Android 可折叠TextView
- [译] Python 优化机制：常量折叠
- ElementUI Collapse折叠面板更改展开icon位置
- 微软Edge团队重新塑造三星Fold等折叠屏手机网页体验
- 大屏幕和折叠屏: 让您的 Android 游戏登上更大的舞台
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
