Fruchterman 力导向布局
概述
Fruchterman 布局是基于 Graph Drawing by Force-directed Placement 算法实现的一种力导向布局，通过灵活的参数配置模拟物理作用，使整个布局自动达到能量最小的稳定平衡状态，支持基础均匀分布和聚类布局。参考更多 Fruchterman 力导向布局样例和源码
使用场景
- 基础均匀分布: 适用于展示节点均匀分布，整体结构清晰的网络关系图, 比如网络拓扑、知识图谱。
- 聚类布局: 适用于具有内部聚合特性或分组的数据可视化展示, 比如社区结构展示、关联组分析。
配置项
| 属性 | 描述 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| type | 布局类型 | 'fruchterman' |
- | ✓ |
| height | 布局的高度 | number |
容器高度 | |
| width | 布局的宽度 | number |
容器宽度 | |
| maxIteration | 最大迭代次数 | number |
500 | |
| minMovement | 收敛阈值 | number |
0.4 | |
| gravity | 中心力大小，指所有节点被吸引到 center 的力。数字越大，布局越紧凑 | number |
10 | |
| speed | 每次迭代节点移动的速度。速度太快可能会导致强烈震荡 | number |
5 | |
| onTick | 每一次迭代的回调函数 | (data: LayoutMapping) => void | - |
聚类布局
| 属性 | 描述 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| clustering | 是否按照聚类布局 | boolean |
false |
|
| nodeClusterBy | 聚类布局依据的节点数据 data 中的字段名，在 clustering 为 true 时生效 |
string |
'cluster' |
|
| clusterGravity | 聚类内部的重力大小，影响聚类的紧凑程度，在 clustering 为 true 时生效 |
number |
10 |
示例代码
基本布局
import { Graph } from '@antv/g6';
const graph = new Graph({
container: 'container',
width: 500,
height: 250,
data: {
nodes: [
{ id: '0' },
{ id: '1' },
{ id: '2' },
{ id: '3' },
{ id: '4' },
{ id: '5' },
{ id: '6' },
{ id: '7' },
{ id: '8' },
{ id: '9' },
{ id: '10' },
],
edges: [
{ source: '0', target: '1' },
{ source: '0', target: '2' },
{ source: '0', target: '3' },
{ source: '0', target: '4' },
{ source: '0', target: '7' },
{ source: '0', target: '8' },
{ source: '0', target: '9' },
{ source: '0', target: '10' },
{ source: '2', target: '3' },
{ source: '4', target: '5' },
{ source: '4', target: '6' },
{ source: '5', target: '6' },
{ source: '9', target: '10' },
],
},
node: {
style: {
labelFill: '#fff',
labelPlacement: 'center',
labelText: (d) => d.id,
},
},
layout: {
type: 'fruchterman',
gravity: 5,
speed: 5,
},
behaviors: ['drag-canvas', 'drag-element'],
});
graph.render();
import { Graph } from '@antv/g6';
import GUI from 'lil-gui';
export function addPanel(renderPanel: (gui: GUI) => void) {
const gui = new GUI({ container: document.body });
gui.title('Control');
Object.assign(gui.domElement.style, { position: 'absolute', top: '0', right: '0', zIndex: '10' });
renderPanel(gui);
addEventListener('pagehide', () => gui.destroy(), { once: true });
}
export async function createGraph(
options: ConstructorParameters<typeof Graph>[0],
size: { width?: number; height?: number } = {},
renderPanel?: (gui: GUI, graph: Graph) => void,
) {
const container = document.createElement('div');
Object.assign(container.style, {
width: '100%',
maxWidth: `${size.width || 600}px`,
height: `${size.height || 400}px`,
});
document.getElementById('container')!.append(container);
const graph = new Graph({ ...size, ...options, width: container.clientWidth, container, autoResize: true });
addEventListener('pagehide', () => graph.destroy(), { once: true });
await graph.render();
if (renderPanel) addPanel((gui) => renderPanel(gui, graph));
return container;
}展开查看完整代码
import { Graph } from '@antv/g6';
const data = {
nodes: [
{ id: '0' },
{ id: '1' },
{ id: '2' },
{ id: '3' },
{ id: '4' },
{ id: '5' },
{ id: '6' },
{ id: '7' },
{ id: '8' },
{ id: '9' },
{ id: '10' },
],
edges: [
{ source: '0', target: '1' },
{ source: '0', target: '2' },
{ source: '0', target: '3' },
{ source: '0', target: '4' },
{ source: '0', target: '7' },
{ source: '0', target: '8' },
{ source: '0', target: '9' },
{ source: '0', target: '10' },
{ source: '2', target: '3' },
{ source: '4', target: '5' },
{ source: '4', target: '6' },
{ source: '5', target: '6' },
{ source: '9', target: '10' },
],
};
const graph = new Graph({
container: 'container',
data,
node: {
style: {
labelFill: '#fff',
labelPlacement: 'center',
labelText: (d) => d.id,
},
},
layout: {
type: 'fruchterman',
gravity: 5,
speed: 5,
},
behaviors: ['drag-canvas', 'drag-element'],
});
graph.render();聚类布局
import { Graph } from '@antv/g6';
const graph = new Graph({
container: 'container',
width: 500,
height: 250,
data: {
nodes: [
{ id: '0', data: { cluster: 'a' } },
{ id: '1', data: { cluster: 'a' } },
{ id: '2', data: { cluster: 'a' } },
{ id: '3', data: { cluster: 'a' } },
{ id: '4', data: { cluster: 'a' } },
{ id: '5', data: { cluster: 'b' } },
{ id: '6', data: { cluster: 'b' } },
{ id: '7', data: { cluster: 'b' } },
{ id: '8', data: { cluster: 'c' } },
{ id: '9', data: { cluster: 'c' } },
{ id: '10', data: { cluster: 'c' } },
],
edges: [
{ source: '0', target: '1' },
{ source: '0', target: '2' },
{ source: '0', target: '4' },
{ source: '0', target: '6' },
{ source: '2', target: '3' },
{ source: '2', target: '4' },
{ source: '3', target: '4' },
{ source: '5', target: '6' },
{ source: '6', target: '7' },
{ source: '7', target: '8' },
{ source: '8', target: '9' },
{ source: '8', target: '10' },
],
},
node: {
style: {
labelFill: '#fff',
labelPlacement: 'center',
labelText: (d) => `${d.data.cluster}-${d.id}`,
},
palette: {
type: 'group',
field: 'cluster',
},
},
edge: {
style: {
endArrow: true,
},
},
layout: {
type: 'fruchterman',
gravity: 6,
speed: 5,
// 聚类布局参数
clustering: true,
nodeClusterBy: 'cluster',
clusterGravity: 3,
},
behaviors: ['drag-canvas', 'drag-element'],
});
graph.render();
import { Graph } from '@antv/g6';
import GUI from 'lil-gui';
export function addPanel(renderPanel: (gui: GUI) => void) {
const gui = new GUI({ container: document.body });
gui.title('Control');
Object.assign(gui.domElement.style, { position: 'absolute', top: '0', right: '0', zIndex: '10' });
renderPanel(gui);
addEventListener('pagehide', () => gui.destroy(), { once: true });
}
export async function createGraph(
options: ConstructorParameters<typeof Graph>[0],
size: { width?: number; height?: number } = {},
renderPanel?: (gui: GUI, graph: Graph) => void,
) {
const container = document.createElement('div');
Object.assign(container.style, {
width: '100%',
maxWidth: `${size.width || 600}px`,
height: `${size.height || 400}px`,
});
document.getElementById('container')!.append(container);
const graph = new Graph({ ...size, ...options, width: container.clientWidth, container, autoResize: true });
addEventListener('pagehide', () => graph.destroy(), { once: true });
await graph.render();
if (renderPanel) addPanel((gui) => renderPanel(gui, graph));
return container;
}展开查看完整代码
import { Graph } from '@antv/g6';
const data = {
nodes: [
{ id: '0', data: { cluster: 'a' } },
{ id: '1', data: { cluster: 'a' } },
{ id: '2', data: { cluster: 'a' } },
{ id: '3', data: { cluster: 'a' } },
{ id: '4', data: { cluster: 'a' } },
{ id: '5', data: { cluster: 'b' } },
{ id: '6', data: { cluster: 'b' } },
{ id: '7', data: { cluster: 'b' } },
{ id: '8', data: { cluster: 'c' } },
{ id: '9', data: { cluster: 'c' } },
{ id: '10', data: { cluster: 'c' } },
],
edges: [
{ source: '0', target: '1' },
{ source: '0', target: '2' },
{ source: '0', target: '4' },
{ source: '0', target: '6' },
{ source: '2', target: '3' },
{ source: '2', target: '4' },
{ source: '3', target: '4' },
{ source: '5', target: '6' },
{ source: '6', target: '7' },
{ source: '7', target: '8' },
{ source: '8', target: '9' },
{ source: '8', target: '10' },
],
};
const graph = new Graph({
container: 'container',
data,
node: {
style: {
labelFill: '#fff',
labelPlacement: 'center',
labelText: (d) => `${d.data.cluster}-${d.id}`,
},
palette: {
type: 'group',
field: 'cluster',
},
},
edge: {
style: {
endArrow: true,
},
},
layout: {
type: 'fruchterman',
gravity: 6,
speed: 5,
// 聚类布局参数
clustering: true,
nodeClusterBy: 'cluster',
clusterGravity: 3,
},
behaviors: ['drag-canvas', 'drag-element'],
});
graph.render();