G6基本使用
Graph
Graph 是 G6 图表的载体，所有的 G6 节点实例操作以及事件，行为监听都在 Graph 实例上进行。
Graph 的生命周期为：初始化—>加载数据—>渲染—>更新—>销毁。
G6.Graph的配置项参数
初始化
Graph 的初始化通过 new 进行实例化，实例化时需要传入需要的参数。
const graph = new G6.Graph({
container: '',
width: 500,
height: 500,
modes: {
default: ['drag-canvas'],
},
layout: {
type: 'radial',
unitRadius: 50,
center: [500, 300],
},
});加载
设置初始化数据：graph.data(data) //graph 是Graph的实例
渲染
1. render
根据提供的数据渲染视图： graph.render()
2. read(data)
接收数据，并进行渲染，read 方法的功能相当于 data 和 render 方法的结合。
graph.read(data);
3. changeData(data)
更新数据源，根据新的数据重新渲染视图。
更新
1. addItem(type, model)
新增元素（节点，边，或节点分组）。type可选
值为
'node'、'edge'和'group'
const model = {
id: 'node',
label: 'node',
address: 'cq',
x: 200,
y: 150,
style: {
fill: 'blue',
},
};
graph.addItem('node', model);2. add(type,model)
同 addItem(type, model)。
3. updateItem(item, model)
更新元素，包括更新数据、样式等。item是元素 ID 或元素实例
const model = {
id: 'node',
label: 'node',
address: 'cq',
x: 200,
y: 150,
style: {
fill: 'blue',
},
}
// 通过 ID 查询节点实例
const item = graph.findById('node');
graph.updateItem(item, model);4. update(item, model)
同 updateItem(item, model)。
5. removeItem(item)
删除元素，当 item 为 group ID 时候，则删除分组。
// 通过 ID 查询节点实例
const item = graph.findById('node');
graph.removeItem(item);6. remove(item)
同 removeItem(item)。
7. refresh()
当源数据发生变更时，根据新数据刷新视图。
graph.refresh();
8. refreshItem(item)
刷新指定元素。
// 通过 ID 查询节点实例
const item = graph.findById('node');
graph.refreshItem(item);实例 Item
Item 是 G6 中绘图元素实例，目前包含节点和边的实例。对于实例的变更建议在 graph 上进行。
1.更新 update(model)
model 属性
const model = {
id: 'node',
shape: 'rect',
label: 'node',
style: {
fill: 'red',
},
};
item.update(model);2.refresh()
刷新元素，包括更新元素位置，更新元素样式，清除之前的缓存。
一般在以下情况时，会刷新元素：
- item model 被改变；
- 边的位置发生改变，需要重新计算边
item.refresh();
3.销毁 destroy()
销毁元素，主要包括停止动画、删除 group 中的所有元素、清空配置项、设置
destroyed为true等操作。item.destroy();
节点 Node
Node 继承自 Item。所以 Item 上面的方法在 Node 实例中都可以调用。
边 Edge
Edge 继承自 Item。所以 Item 的方法在 Edge 实例中都可以使用。
Layout
借助布局算法对图进行布局，共有9 种一般图的布局和 4 种树图的布局。默认为 random 布局。每种布局方法的配置项不尽相同
使用方法： 比如力导向布局：layout{ type: "force" }
layout: { // Object，可选，布局的方法及其配置项，默认为 random 布局。
type: 'force',
preventOverlap: true,
nodeSize: 30,
... // 其他配置
}一般图：
- Random Layout：随机布局；
-
Force Layout：经典力导向布局：
力导向布局：一个布局网络中，粒子与粒子之间具有引力和斥力，从初始的随机无序的布局不断演变，逐渐趋于平衡稳定的布局方式称之为力导向布局。适用于描述事物间关系，比如人物关系、计算机网络关系等。
- Circular：环形布局；
- Radial：辐射状布局；
- MDS：高维数据降维算法布局；
- Fruchterman：Fruchterman 布局，一种力导布局；
- Dagre：层次布局。
树图布局：
- Dendrogram：树状布局（叶子节点布局对齐到同一层）；
- CompactBox：紧凑树布局；
- Mindmap：脑图布局；
- Intended：缩进布局。
Behavior
G6 中的复合交互，一般 Behavior 包含一个或多个事件的监听与处理以及一系列对图中元素的操作。
Behavior 默认包含 shouldBegin，shouldUpdate，shouldEnd 三个回调，代表是否开始行为，是否更新元素，是否进行结束行为，当返回值为 false 时阻止默认行为。
G6.registerBehavior('behaviorName', {
getEvents() {
return {
'node:click': 'onNodeClick',
'edge:click': 'onEdgeClick',
mousemove: 'onMouseMove',
};
},
onNodeClick(evt) {
// TODO
},
onEdgeClick(evt) {
// TODO
},
onMouseMove(evt) {
// TODO
},
});const container = document.getElementById('container');
const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
this.graph = new G6.Graph({
container,
modes: {
default: [ 'drag-canvas', 'drag-node', 'click-select', 'zoom-canvas' ]
},
layout: {
type: "radial",
linkDistance: 200, // 调整节点之间的距离
preventOverlap: true,
nodeStrength: -1000, // 节点之间的斥力强度
edgeStrength: 0.1, // 边的引力强度
},
width,
height,
// data,
defaultNode: {
size: 50,
style: {
fill: '#a6d936',
stroke: '#a6d936',
},
labelCfg: { // 标签配置属性
position: 'bottom'
}
},
defaultEdge: {
style: {
stroke: '#ddd',
lineWidth: 2,
endArrow: true
},
},
});
this.graph.on('node:click', this.handleNodeClick);
this.graph.render();