最近遇到一個(gè)需求：在一個(gè)關(guān)系圖上進(jìn)行特定節(jié)點(diǎn)的隱藏乍炉，并生成新的關(guān)系圖抡锈。項(xiàng)目里面用的可視化框架是g6怜珍，然后我去g6的文檔里面搜索了一下“數(shù)據(jù)過(guò)濾”渡紫，好家伙，出現(xiàn)了一個(gè)左側(cè)目錄里面根本不存在的頁(yè)面考赛，而且并沒(méi)有任何代碼講解惕澎，只是在介紹一個(gè)項(xiàng)目，不知道這個(gè)項(xiàng)目是曾經(jīng)存在過(guò)還是以后將要上線......最后很無(wú)奈颜骤，不管數(shù)據(jù)過(guò)濾這個(gè)功能是曾經(jīng)有還是未來(lái)會(huì)有唧喉，反正當(dāng)前版本是沒(méi)找著的，只有自力更生了忍抽。
關(guān)系圖基本說(shuō)明
其實(shí)不管是g6還是其他的可視化框架八孝，普通的關(guān)系圖只需要兩組數(shù)據(jù)（不考慮兩個(gè)節(jié)點(diǎn)之間多條連線），準(zhǔn)確的說(shuō)是兩個(gè)數(shù)組鸠项，第一個(gè)是點(diǎn)的集合干跛，每一項(xiàng)儲(chǔ)存每個(gè)節(jié)點(diǎn)的id，樣式以及其他的信息祟绊，至少要有一個(gè)唯一id楼入；第二個(gè)是節(jié)點(diǎn)關(guān)系的集合，每一項(xiàng)有一個(gè)上游節(jié)點(diǎn)id和一個(gè)下游節(jié)點(diǎn)id牧抽，這兩個(gè)id就能畫(huà)出兩個(gè)節(jié)點(diǎn)和一條線了嘉熊。最終無(wú)數(shù)個(gè)節(jié)點(diǎn)和節(jié)點(diǎn)關(guān)系就能組成一個(gè)復(fù)雜的關(guān)系圖。
框架會(huì)幫我們把節(jié)點(diǎn)畫(huà)到畫(huà)布上并分配每個(gè)節(jié)點(diǎn)的坐標(biāo)扬舒，我們要做的就是傳入點(diǎn)的集合和關(guān)系的集合阐肤。
而要實(shí)現(xiàn)開(kāi)頭的需求整體上需要兩步，第一步是將要隱藏的點(diǎn)從原始的點(diǎn)集合里面去掉呼巴，第二步是生成新的節(jié)點(diǎn)關(guān)系數(shù)組泽腮。第一步進(jìn)行數(shù)組過(guò)濾就能實(shí)現(xiàn)，關(guān)鍵就在于第二步衣赶。
生成基本的關(guān)系圖
寫(xiě)了一個(gè)demo，整個(gè)步驟官網(wǎng)上都有就不贅述了厚满，只將數(shù)據(jù)放上來(lái)府瞄，加上了一點(diǎn)樣式便于區(qū)分，使用的是g6的dagre布局碘箍。項(xiàng)目里面一開(kāi)始沒(méi)考慮到需要隱藏的節(jié)點(diǎn)有兩兩相鄰的情況遵馆，所以當(dāng)時(shí)多花了一天才搞定。
const data = {
// 點(diǎn)集
nodes: [
{
id: 'node1',
label: 'n1',
type: 'normal' // normal-留下的點(diǎn)hide-需要隱藏的點(diǎn)
},
{
id: 'node2',
label: 'n2',
type: 'normal'
},
{
id: 'node3',
label: 'n3',
type: 'normal'
},
{
id: 'node4',
label: 'n4',
type: 'normal'
},
{
id: 'hide1',
label: 'h1',
style: {
fill: 'red'
},
type: 'hide'
},
{
id: 'hide2',
label: 'h2',
style: {
fill: 'red'
},
type: 'hide'
}
],
// 邊集
edges: [
{
source: 'node1', // 上游節(jié)點(diǎn)
target: 'hide1' // 下游節(jié)點(diǎn)
},
{
source: 'node2',
target: 'hide1'
},
{
source: 'hide1',
target: 'hide2'
},
{
source: 'hide2',
target: 'node3'
},
{
source: 'hide2',
target: 'node4'
}
],
};
效果圖如下
現(xiàn)在要求h1和h2隱藏之后n1要連接到n3和n4丰榴，n2也要連接到n3和n4货邓。
整體思路
- 過(guò)濾出需要隱藏的點(diǎn)和不需要隱藏的點(diǎn)
- 從現(xiàn)有的節(jié)點(diǎn)關(guān)系中過(guò)濾出無(wú)需改變的節(jié)點(diǎn)關(guān)系（這個(gè)demo比較簡(jiǎn)單，所有的節(jié)點(diǎn)關(guān)系都要改變四濒，假如只有h1需要隱藏换况，那么h2-n3,h2-n4這兩個(gè)節(jié)點(diǎn)關(guān)系就過(guò)濾出來(lái)了）
- 從現(xiàn)有的節(jié)點(diǎn)關(guān)系中遍歷出需要隱藏的節(jié)點(diǎn)的上游節(jié)點(diǎn)和下游節(jié)點(diǎn)
- 通過(guò)雙重遍歷上下游節(jié)點(diǎn)集合將新的節(jié)點(diǎn)關(guān)系加入到第一步生成的無(wú)需改變的節(jié)點(diǎn)關(guān)系中
- 將新的節(jié)點(diǎn)關(guān)系去重职辨，隨后通過(guò)不需要隱藏的點(diǎn)和新的節(jié)點(diǎn)關(guān)系生成新的關(guān)系圖
上述第三步里面需要判斷獲取到的上游或下游節(jié)點(diǎn)是否也是隱藏節(jié)點(diǎn)（遞歸）
詳細(xì)過(guò)程
首先是準(zhǔn)備工作，過(guò)濾出需要的數(shù)組（以下代碼里面使用的'_'都代表lodash中的方法）
// 需要隱藏的節(jié)點(diǎn)的id集合(方便后續(xù)計(jì)算)
const hideNodes = data.nodes.filter(v=>v.type==='hide').map(v=>v.id);
// 剩余正常顯示的節(jié)點(diǎn)
const restNodes = data.nodes.filter(v=>v.type!=='hide');
// 舊的節(jié)點(diǎn)關(guān)系(因?yàn)間6使用data數(shù)據(jù)生成圖之后data里面會(huì)多出來(lái)很多屬性戈二，所以過(guò)濾無(wú)關(guān)屬性方便去重)
const oldEdges = data.edges.map(v => {
return {
target: v.target,
source: v.source
}
});
// 新的節(jié)點(diǎn)關(guān)系
let newEdges = [];
// 無(wú)需改變的節(jié)點(diǎn)關(guān)系
const noChanges = oldEdges.filter(v=>{
return !hideNodes.includes(v.target) && !hideNodes.includes(v.source);
});
獲取被隱藏節(jié)點(diǎn)的下游節(jié)點(diǎn)和上游節(jié)點(diǎn)舒裤，當(dāng)上游或下游節(jié)點(diǎn)也是被隱藏的節(jié)點(diǎn)時(shí)需要遞歸繼續(xù)判斷，這里為了思考方便我寫(xiě)了兩個(gè)方法觉吭，最后項(xiàng)目里面寫(xiě)一個(gè)方法就行
// hideItem是hideNodes遍歷時(shí)的每一項(xiàng)
function getTarget(oldEdges, hideItem, hideNodes) {
const result = [];
oldEdges.forEach(v=>{
if(v.source === hideItem) {
if(hideNodes.includes(v.target)){
const currentItem = v.target;
const restHideNodes = _.without(hideNodes, v.target); // 當(dāng)前值從隱藏節(jié)點(diǎn)數(shù)組中去掉
const res = getTarget(oldEdges, currentItem, restHideNodes);
result.push(...res);
}else{
result.push(v.target);
}
}
});
return result;
}
function getSource(oldEdges, hideItem, hideNodes) {
const result = [];
oldEdges.forEach(v=>{
if(v.target === hideItem) {
if(hideNodes.includes(v.source)){
const currentItem = v.source;
const restHideNodes = _.without(hideNodes, v.source); // 當(dāng)前值從隱藏節(jié)點(diǎn)數(shù)組中去掉
const res = getSource(oldEdges, currentItem, restHideNodes);
result.push(...res);
}else{
result.push(v.source);
}
}
});
return result;
}
最后雙重for循環(huán)獲取新的節(jié)點(diǎn)關(guān)系
hideNodes.forEach(hideItem=>{
// 被隱藏節(jié)點(diǎn)的下游節(jié)點(diǎn)
const targetArr = getTarget(oldEdges, hideItem, hideNodes);
// 被隱藏節(jié)點(diǎn)的上游節(jié)點(diǎn)
const sourceArr = getSource(oldEdges, hideItem, hideNodes);
for (const target of targetArr) {
for (const source of sourceArr) {
noChanges.push({ source, target });
}
}
newEdges.push(...noChanges);
// 去重
newEdges = _.uniqWith(newEdges, _.isEqual);
});
至此這個(gè)功能就算是完成了腾供，項(xiàng)目里面用起來(lái)暫時(shí)還沒(méi)什么問(wèn)題，不過(guò)像這種稍微復(fù)雜的過(guò)程可能還有進(jìn)一步優(yōu)化的空間鲜滩，以我的實(shí)力也就只能做到這種地步了伴鳖，這個(gè)計(jì)算過(guò)程還是我與小伙伴討論前后完善了3天才寫(xiě)出來(lái)的，這就是吃了不懂算法的虧啊徙硅。
最后附上完整代碼
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="hide">切換節(jié)點(diǎn)</button>
<div id="mountNode"></div>
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.0.3/dist/g6.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
<script>
let isShow = true;
const data = {...}; // 見(jiàn)上文
const graph = new G6.Graph({
container: 'mountNode',
width: 800,
height: 500,
layout: {
type: 'dagre',
rankdir: 'LR'
}
});
graph.data(data);
graph.render();
const hideBtn = document.getElementById('hide');
hideBtn.onclick = ()=>{
isShow = !isShow;
if(isShow) {
graph.data(data);
graph.render();
return;
}
// 需要隱藏的節(jié)點(diǎn)的id集合
const hideNodes = data.nodes.filter(v=>v.type==='hide').map(v=>v.id);
// 剩余正常顯示的節(jié)點(diǎn)
const restNodes = data.nodes.filter(v=>v.type!=='hide');
// 舊的節(jié)點(diǎn)關(guān)系(過(guò)濾無(wú)關(guān)屬性方便去重)
const oldEdges = data.edges.map(v => {
return {
target: v.target,
source: v.source
}
});
// 新的節(jié)點(diǎn)關(guān)系
let newEdges = [];
// 無(wú)需改變的節(jié)點(diǎn)關(guān)系
const noChanges = oldEdges.filter(v=>{
return !hideNodes.includes(v.target) && !hideNodes.includes(v.source);
});
hideNodes.forEach(hideItem=>{
// 被隱藏節(jié)點(diǎn)的下游節(jié)點(diǎn)
const targetArr = getTarget(oldEdges, hideItem, hideNodes);
// 被隱藏節(jié)點(diǎn)的上游節(jié)點(diǎn)
const sourceArr = getSource(oldEdges, hideItem, hideNodes);
for (const target of targetArr) {
for (const source of sourceArr) {
noChanges.push({ source, target });
}
}
newEdges.push(...noChanges);
// 去重
newEdges = _.uniqWith(newEdges, _.isEqual);
});
const newData = {
nodes: restNodes,
edges: newEdges
};
graph.data(newData);
graph.render();
}
function getTarget(oldEdges, hideItem, hideNodes) {
const result = [];
oldEdges.forEach(v=>{
if(v.source === hideItem) {
if(hideNodes.includes(v.target)){
const currentItem = v.target;
const restHideNodes = _.without(hideNodes, v.target); // 當(dāng)前值從隱藏節(jié)點(diǎn)數(shù)組中去掉
const res = getTarget(oldEdges, currentItem, restHideNodes);
result.push(...res);
}else{
result.push(v.target);
}
}
});
return result;
}
function getSource(oldEdges, hideItem, hideNodes) {
const result = [];
oldEdges.forEach(v=>{
if(v.target === hideItem) {
if(hideNodes.includes(v.source)){
const currentItem = v.source;
const restHideNodes = _.without(hideNodes, v.source); // 當(dāng)前值從隱藏節(jié)點(diǎn)數(shù)組中去掉
const res = getSource(oldEdges, currentItem, restHideNodes);
result.push(...res);
}else{
result.push(v.source);
}
}
});
return result;
}
</script>
</body>
</html>
