AntV G6流程图节点控制显示和隐藏
1、点击隐藏，控制隐藏节点4以及相关的边
2、点击显示，显示节点4以及相关的边
3、点击添加颜色，给指定节点4添加颜色
demo如下：
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>节点方法</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/as/g/datavis/g6/1.1.6/index.js"></script>
</head>
<body>
<div id="c1"></div>
<script type="text/javascript">
$('body').prepend('<button id="getEdges">隐藏节点和边</button> <button id="getLinkNodes">显示节点和边</button> <button id="getUnLinkNodes">节点添加颜色</button> ')
var Util = G6.Util;
// 第三步：设置数据
var data = {
"source": {
"nodes": [
{
"shape": "rect",
"label": "节点",
"id": "keyNode",
"x": 710,
"y": 260,
"color": "#FF9D2D"
},
{
"shape": "rect",
"label": "节点1",
"x": 780,
"y": 150,
"id": "f7171de1"
},
{
"shape": "rect",
"label": "节点2",
"x": 550,
"y": 210,
"id": "f2201be8"
},
{
"shape": "rect",
"label": "节点3",
"x": 590,
"y": 340,
"id": "b5b421cf"
},
{
"shape": "rect",
"label": "节点4",
"x": 780,
"y": 360,
"id": "a285b5dc"
}
],
"edges": [
{
"shape": "arrow",
"source": "keyNode",
"target": "f2201be8",
"id": "672f31fc"
},
{
"shape": "arrow",
"source": "keyNode",
"target": "b5b421cf",
"id": "62ed8cb2"
},
{
"shape": "arrow",
"source": "b5b421cf",
"target": "keyNode",
"id": "4542e914",
"controlPoints": [
{
"x": 590,
"y": 324
},
{
"x": 590,
"y": 260
},
{
"x": 679,
"y": 260
}
]
},
{
"shape": "smoothArrow",
"source": "f7171de1",
"target": "keyNode",
"id": "58624bdb",
"controlPoints": [
{
"x": 749,
"y": 150
},
{
"x": 700,
"y": 150
},
{
"x": 710,
"y": 244
}
]
},
{
"shape": "arrow",
"source": "f7171de1",
"target": "a285b5dc",
"id": "f119308c"
}
]
}
};
// 第四步：配置G6画布
var net = new G6.Net({
id: 'c1', // 容器ID
fitView: 'autoZoom',
mode: 'none',
width: 500, // 画布宽
height: 500 // 画布高
});
// 第五步：载入数据
net.read(Util.clone(data));
// 第六步：渲染关系图
net.render();
$('#getEdges').on('click', function(){
reRender(); // 重新渲染
var keyNode = net.find('a285b5dc');
keyNode.hide();
net.refresh();
});
$('#getLinkNodes').on('click', function(){
reRender(); // 重新渲染
var keyNode = net.find('a285b5dc');
keyNode.show();
net.refresh();
});
$('#getUnLinkNodes').on('click', function(){
reRender(); // 重新渲染
var keyNode = net.find('a285b5dc');
net.update(keyNode, {
color: '#00B07C'
});
net.refresh();
});
function reRender(){
net.clear();
net.read(Util.clone(data));
net.render();
}
</script>
</body>
</html>