antv G6关系树,拓扑图 不同层级不同颜色
程序员文章站
2022-06-07 14:58:48
...
前端菜鸡… 近期遇到一个需求,要求关系图每个层级不同颜色展示,位置还得随机,目前echart实现后都不太满意…em 于是G6 …
废话不多说 看代码(效果)//
1,引入G6 相关 (基础数据是官方的)
import G6 from '@antv/g6'
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
.then(res => res.json())
.then(data => {
console.log(data)
const width = document.getElementById('map').scrollWidth;
const height = document.getElementById('map').scrollHeight || 500;
const graph= new G6.TreeGraph({
container: 'map',
width,
height,
pixelRatio: 2,
modes: {
default: [{
type: 'collapse-expand',
onChange: function onChange(item, collapsed) {
console.log(item)
const data = item.get('model').data;
data.collapsed = collapsed;
return true;
}
}, 'drag-canvas', 'zoom-canvas']
},
defaultNode: {
size: [200, 50],
shape: 'rect',
style: {
fill: '#C6E5FF',
stroke: '#5B8FF9'
}
},
defaultEdge: {
shape: 'cubic-horizontal',
style: {
stroke: '#A3B1BF'
}
},
layout: {
type: 'mindmap',
direction: 'H',
getHeight: () => {
return 40;
},
getWidth: () => {
return 160;
},
getVGap: () => {
return 10;
},
getHGap: () => {
return 100;
}
}
});
let centerX = 0;
// 以下重点
graph.node(function (node) {
// depth 类似节点标识
if(node.depth == 0){
console.log(node)
return {
size:[100,60],
style:{
fill:'red',
// stroke:''
},
label:node.id
}
}
if(node.depth == 1){
console.log(node)
return {
size:[100,60],
style:{
fill:'blue',
},
label:node.id
}
}
return {
label: node.id, // 设置显示名称
labelCfg: {
// position: node.children && node.children.length > 0 ? 'left' : node.x > centerX ? 'right' : 'left', // 设置显示左右
offset: 5
}
};
});
graph.data(data);
graph.render();
graph.fitView();
});
这样效果就出来了. 不同级不同颜色 看图
上一篇: 7-6 福到了 (15分)
下一篇: C语言试题答案