Antv-G6入门
//节点，边线的配置。
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：边绑定。
[G6链接地址]