//节点,边线的配置。
const graph = new G6.Graph({
container: ‘mountNode’, //挂在标签的id
width: 800, //cavas的宽
height: 600, //cavas的高
fitView: true, //画布适配
fitViewPadding:[20,20,20,20], //画布上的四周留白宽度
//节点的默认样式 节点又被称作元素
defaultNode:{
id: ‘node0’ //节点的id
shape: ‘circle’ //节点的图型
size:30, //节点的大小
label: ‘G6示例’ //节点标签文本
style:{ //节点的样式配置
fill: ‘blue’, //节点填充色
stroke: ‘#000’, //节点的描边色
linewidth: 1, //节点的粗细
},
labelCfg: { //节点的标签文本配置
style: { //节点标签文本样式配置
fill: '#fff' //节点标签文本颜色
}
}
},
// 边的默认样式
defaultEdge: {
style: {
opacity: 0.6 //边的透明度
stroke: '#000' //边的描边颜色
},
labelCfg: { //边上的标签文本配置
style:{ //边上的标签文本样式配置
fill: '#fff' //边上标签文本颜色
autoRotate: true, //边上的标签文本根据边的方向旋转
}
}
},
// 布局配置 一般图 有random(随机布局,数据中没有节点信息时默认使用随机布局),force(经典力向布局),circular(环形布局)
// radial(辐射状布局),MDS(高维数据降维布局),dagre(层次布局)
// 树形图:dendrogram (树状布局,叶子节点对齐到同一层),compactBox(紧凑树状图),mindmap(脑图),intended(缩进布局)
layout:{
type: ‘force’, //指定为力导向布局
preventOverlap: true, //防止节点配置
// nodeSize: 30, //节点大小,用于算法中防止节点重叠时碰撞检测,因为上一节点配置了size,所以这注释掉了
},
// 交互管理
modes:{
default:[‘drag-canvas’,‘zoom-canvas’,‘drag-node’] //默认模式:拖拽画布,缩放画布,拖拽节点
edit:[] //编辑模式
}
// 通过nodeStateStyles和edgeStateStyles两个配置项配置节点,边线在不同状态下的样式。
nodeStateStyles:{
// 鼠标 hover 上节点,即 hover 状态为 true 时的样式
hover:{
fill: ‘#000’ //节点填充色
}
//鼠标点击节点时的样式
click:{
stroke: ‘#000’, //节点描边颜色
linewidth: 3 //节点描边粗细
}
},
//边线不同状态下的样式集合
edgeStateStyles:{
click:{
stroke: ‘#000’ //边线的描边颜色
}
},
})
//数据的设置
const main = async () => {
const response = await fetch(
‘https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json’
)
const remoteData = await response.json();
graph.data(remoteData);
graph.render();
//事件的监听
graph.on('node:click',e => {
const clickNodes = graph.findAllByState('node','clik')
clickNodes.forEach(cn => {
graph.setItemState(cn,'click',false)
})
const nodeItem = e.item;
graph.setItemState(nodeItem,'click',true)
})
}
main()
引入插件三步:1.引入插件,2.实例化插件,3.实例化图时将插件的实例配置到图上
插件:Minimap(缩略图) Grid(网格) EdgeBundling:边绑定。