logo

G6

  • 文档
  • API
  • 图表示例
  • 社区
  • 所有产品antv logo arrow
  • 5.0.49
  • 简介
  • 开始使用
    • 快速开始
    • 安装
    • 前端框架集成
      • 在 React 中使用
      • 在 Vue 中使用
      • 在 Angular 中使用
    • 详细教程
  • 图 Graph
    • Graph - 图
    • Options 配置项
    • 内置扩展
    • Extension - 扩展
  • 数据 Data
  • 元素 Element
    • 元素总览
    • 元素状态
    • 节点 Node
      • 节点总览
      • 节点通用配置项
      • 圆形节点 Circle
      • 菱形节点 Diamond
      • 甜甜圈节点 Donut
      • 椭圆形节点 Ellipse
      • 六边形节点 Hexagon
      • HTML节点 Html
      • 图片节点 Image
      • 矩形节点 Rect
      • 五角形节点 Star
      • 三角形节点 Triangle
      • 自定义节点
      • 使用 React 定义节点
    • 边 Edge
      • 边总览
      • 边通用配置项
      • 三次贝塞尔曲线边 Cubic
      • 水平三次贝塞尔曲线边 CubicHorizontal
      • 垂直三次贝塞尔曲线边 CubicVertical
      • 直线边 Line
      • 二次贝塞尔曲线边 Quadratic
      • 折线边 Polyline
      • 自定义边
    • 组合 Combo
      • 组合总览
      • 组合通用配置项
      • 圆形组合 Circle
      • 矩形组合 Rect
      • 自定义 Combo
    • 图形 Shape
      • 图形 Shape 与 KeyShape
      • 原子 Shape 以及其属性
      • 复合 Shape 的设计与实现
  • 布局 Layout
    • 布局总览
    • 布局通用配置项
    • AntV Dagre 布局 AntvDagre
    • 环形布局 Circular
    • 复合布局 ComboCombined
    • 紧凑树布局 CompactBox
    • 同心圆布局 Concentric
    • 3D D3力导向布局 D3Force3D
    • D3力导向布局 D3Force
    • Dagre 布局
    • 生态树 Dendrogram
    • 鱼骨布局 Fishbone
    • ForceAtlas2 力导向布局
    • Force 力导向布局
    • Fruchterman 力导向布局
    • 网格布局 Grid
    • 缩进树 Indented
    • 高维数据降维布局 MDS
    • 脑图树 Mindmap
    • 径向布局 Radial
    • 随机布局 Random
    • 蛇形布局 Snake
    • 自定义布局
  • 交互 Behavior
    • 交互总览
    • 缩放画布 ZoomCanvas
    • 标签自适应显示 AutoAdaptLabel
    • 框选 BrushSelect
    • 点击选中 ClickSelect
    • 展开/收起元素 CollapseExpand
    • 创建边 CreateEdge
    • 拖拽画布 DragCanvas
    • 拖拽元素 DragElement
    • 力导向拖拽元素 DragElementForce
    • 缩放画布时固定元素大小 FixElementSize
    • 聚焦元素 FocusElement
    • 悬停激活 HoverActivate
    • 套索选择 LassoSelect
    • 优化视口变换 OptimizeViewportTransform
    • 滚动画布 ScrollCanvas
    • 自定义交互
  • 插件 Plugin
    • 插件总览
    • 背景 Background
    • 气泡集 BubbleSets
    • 上下文菜单 Contextmenu
    • 边绑定 EdgeBundling
    • 边过滤镜 EdgeFilterLens
    • 鱼眼放大镜 Fisheye
    • 全屏展示 Fullscreen
    • 网格线 GridLine
    • 历史记录 History
    • 轮廓包围 Hull
    • 图例 Legend
    • 小地图 Minimap
    • 对齐线 Snapline
    • 时间条 Timebar
    • 工具栏 Toolbar
    • 提示框 Tooltip
    • 水印 Watermark
    • 自定义插件
  • 数据处理 Transform
    • 数据处理总览
    • 动态调整节点大小 MapNodeSize
    • 径向标签 PlaceRadialLabels
    • 平行边 ProcessParallelEdges
    • 自定义数据处理
  • 主题 Theme
    • 主题总览
    • 自定义主题
    • 色板
    • 自定义色板
  • 动画 Animation
    • 动画总览
    • 自定义动画
  • 扩展阅读
    • 事件
    • 渲染器
    • 坐标系
    • 下载图片
    • 使用 iconfont
    • 使用 3D
    • 项目打包
  • 版本特性
    • 新版本特性
    • 升级到 5.0
  • 常见问题
  • 参与贡献

D3力导向布局 D3Force

上一篇
3D D3力导向布局 D3Force3D
下一篇
Dagre 布局

资源

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

概述

D3Force 布局是基于 d3-force 实现的力导向布局。它通过模拟物理力的作用(如引力、斥力、碰撞等),使图布局达到一个能量最小的稳定状态。

这种布局的主要特点是:

  1. 自动排列:不需要手动设置节点位置,系统会自动找到合适的位置
  2. 实时调整:当你拖动某个节点时,其他节点会实时跟随调整位置
  3. 灵活配置:
    • 可以调整节点间的吸引力和排斥力
    • 可以设置边的理想长度
    • 可以固定某些重要节点的位置
  4. 动画效果:节点移动时会有平滑的动画,让变化更自然
D3Force 布局示意图

核心概念

力系统 Force System

D3Force 布局通过模拟五种不同的力来实现自动布局。想象一个物理世界,这些力同时作用,最终达到平衡:

force

注:图中不同颜色的箭头代表不同类型的力,实际布局中这些力是无形的,同时也会受其他力影响。

  • 链接力(Link Force):想象节点之间连着橡皮筋,可以把相连的节点拉到合适的距离。橡皮筋的松紧度就是力的强度(strength),理想长度就是我们设置的距离(distance)。
  • 多体力(Many-Body Force):类似磁铁的效果,可以让所有节点互相吸引或排斥。力的强度为负值时节点会互相排斥(像相同磁极),为正值时会互相吸引(像相反磁极)。这个力决定了图的疏密程度。
  • 中心力(Center Force):就像所有节点都被一根看不见的绳子拴在画布中心。这个力可以防止节点飘得太远,让整个图保持在画布的中心位置。
  • 碰撞力(Collision Force):让节点变成有实体大小的小球,当节点太近时会自动弹开。这个力主要用来防止节点重叠,提高图的可读性。
  • 径向力(Radial Force):想象有一个看不见的圆环,这个力会把节点吸引到圆环上。通过设置圆的半径和力的强度,可以让节点形成漂亮的环形布局。

迭代系统(Iteration System)

布局计算是一个反复调整的过程,包含两个关键概念:

Alpha 值(活力值)

就像布局的"能量",决定节点移动的剧烈程度:

  • 初始状态:Alpha = 1,节点移动剧烈
  • 计算过程:Alpha 值逐渐降低,节点移动变缓
  • 结束状态:当 Alpha < alphaMin 时,节点停止移动

迭代次数(Iterations)

控制每次计算时力的作用次数:

  • 作用:值越大,布局越精确,但计算越慢
  • 调节:
    • 简单图:使用默认值即可
    • 复杂图:可以适当增加迭代次数
    • 实时交互:建议使用较小的迭代次数

提示:迭代次数(iterations)和活力值(alpha)是相互配合的。增加迭代次数可以让每一步计算更精确,而活力值则控制整体计算的进度。

配置项

属性描述类型默认值必选
type布局类型string'd3-force'✓
nodeSize节点大小(直径),用于碰撞检测防止节点重叠number | ((node, index, nodes) => number)-
iterations力的迭代次数,值越大布局越精确但性能消耗越大number-
onTick每次迭代的回调函数,用于实时获取布局结果(data: LayoutMapping) => void-
forceSimulation自定义力模拟方法,若不指定则使用 d3.js 的方法Simulation<NodeDatum, EdgeDatum>-
randomSource用于生成随机数的函数() => number-

迭代控制

属性描述类型默认值必选
alpha当前迭代的收敛阈值,控制布局的活跃程度number1
alphaMin停止迭代的最小阈值,当 alpha 小于该值时停止迭代number0.001
alphaDecay收敛阈值的衰减率,范围 [0, 1],0.028 对应约 300 次迭代number0.028
alphaTarget目标收敛阈值,系统会尝试将 alpha 收敛到该值number0
velocityDecay速度衰减因子,值越大节点运动越缓慢number0.4

力模型配置

链接力(link)

属性描述类型默认值必选
link.id边的 id 生成函数(edge, index, edges) => string(e) => e.id
link.distance理想边长,边会趋向于该长度number | ((edge, index, edges) => number)30
link.strength力的强度,值越大边长越接近理想边长number | ((edge, index, edges) => number)1
link.iterations链接力的迭代次数number1

多体力(manyBody)

属性描述类型默认值必选
manyBody.strength力的强度,负值为斥力,正值为引力number | ((node, index, nodes) => number)-30
manyBody.thetaBarnes-Hut 算法的精度参数,值越小越精确但性能消耗越大number0.9
manyBody.distanceMin最小作用距离,防止力过大number1
manyBody.distanceMax最大作用距离,超过该距离的节点不产生力numberInfinity

中心力(center)

属性描述类型默认值必选
center.x中心点 x 坐标number0
center.y中心点 y 坐标number0
center.strength力的强度,值越大节点越趋向于中心点number1

碰撞力(collide)

属性描述类型默认值必选
collide.radius碰撞半径,小于该距离的节点会产生排斥力number | ((node, index, nodes) => number)10
collide.strength力的强度,值越大排斥效果越明显number1
collide.iterations碰撞检测的迭代次数number1

径向力(radial)

属性描述类型默认值必选
radial.strength力的强度,值越大节点越趋向于目标半径number | ((node, index, nodes) => number)0.1
radial.radius目标半径,节点会被吸引到该半径的圆周上number | ((node, index, nodes) => number)100
radial.x圆心 x 坐标number0
radial.y圆心 y 坐标number0

X 轴力(x)

属性描述类型默认值必选
x.strengthX 轴方向的力强度number | ((node, index, nodes) => number)-
x.x目标 x 坐标,节点会被吸引到这个位置number | ((node, index, nodes) => number)-

Y 轴力(y)

属性描述类型默认值必选
y.strengthY 轴方向的力强度number | ((node, index, nodes) => number)-
y.y目标 y 坐标,节点会被吸引到这个位置number | ((node, index, nodes) => number)-

代码示例

防止节点重叠

{
layout: {
type: 'd3-force',
collide: {
// Prevent nodes from overlapping by specifying a collision radius for each node.
radius: (d) => d.size / 2,
},
},
}

效果见 示例 - 力导向布局防止节点重叠

团队聚类布局

该示例展示了如何使用力导向布局实现团队聚类效果,不同团队的节点会自动聚集在一起。

import { Graph } from '@antv/g6';
const graph = new Graph({
container: 'container',
width: 500,
height: 250,
autoFit: 'view',
data: {
nodes: [
// 团队 A
{ id: 'A1', team: 'A', label: 'A1', size: 30 },
{ id: 'A2', team: 'A', label: 'A2', size: 20 },
{ id: 'A3', team: 'A', label: 'A3', size: 20 },
{ id: 'A4', team: 'A', label: 'A4', size: 20 },
// 团队 B
{ id: 'B1', team: 'B', label: 'B1', size: 30 },
{ id: 'B2', team: 'B', label: 'B2', size: 20 },
{ id: 'B3', team: 'B', label: 'B3', size: 20 },
{ id: 'B4', team: 'B', label: 'B4', size: 20 },
// 团队 C
{ id: 'C1', team: 'C', label: 'C1', size: 30 },
{ id: 'C2', team: 'C', label: 'C2', size: 20 },
{ id: 'C3', team: 'C', label: 'C3', size: 20 },
{ id: 'C4', team: 'C', label: 'C4', size: 20 },
],
edges: [
// 团队 A 内部连接
{ source: 'A1', target: 'A2' },
{ source: 'A1', target: 'A3' },
{ source: 'A1', target: 'A4' },
// 团队 B 内部连接
{ source: 'B1', target: 'B2' },
{ source: 'B1', target: 'B3' },
{ source: 'B1', target: 'B4' },
// 团队 C 内部连接
{ source: 'C1', target: 'C2' },
{ source: 'C1', target: 'C3' },
{ source: 'C1', target: 'C4' },
// 团队间的少量连接
{ source: 'A1', target: 'B1' },
{ source: 'B1', target: 'C1' },
],
},
node: {
style: {
size: (d) => d.size,
fill: (d) => {
// 不同团队使用不同颜色
const colors = {
A: '#FF6B6B',
B: '#4ECDC4',
C: '#45B7D1',
};
return colors[d.team];
},
labelText: (d) => d.label,
labelPlacement: 'center',
labelFill: '#fff',
},
},
edge: {
style: {
stroke: '#aaa',
},
},
layout: {
type: 'd3-force',
// 配置链接力 - 团队内部节点更靠近
link: {
distance: (d) => {
// 同一团队内的连接距离更短
if (d.source.team === d.target.team) return 50;
// 不同团队间的连接距离更长
return 200;
},
strength: (d) => {
// 同一团队内的连接强度更大
if (d.source.team === d.target.team) return 0.7;
// 不同团队间的连接强度更小
return 0.1;
},
},
// 配置多体力 - 控制节点间的排斥力
manyBody: {
strength: (d) => {
// 团队领导节点(编号1)的排斥力更强
if (d.label.endsWith('1')) return -100;
return -30;
},
},
// 配置碰撞力 - 防止节点重叠
collide: {
radius: 35,
strength: 0.8,
},
// 配置中心力 - 保持图形在画布中心
center: {
strength: 0.05,
},
},
behaviors: ['drag-element-force'],
});
graph.render();
展开查看完整代码
import { Graph } from '@antv/g6';
// 创建模拟数据,包含不同团队的节点
const data = {
nodes: [
// 团队 A
{ id: 'A1', team: 'A', label: 'A1', size: 30 },
{ id: 'A2', team: 'A', label: 'A2', size: 20 },
{ id: 'A3', team: 'A', label: 'A3', size: 20 },
{ id: 'A4', team: 'A', label: 'A4', size: 20 },
// 团队 B
{ id: 'B1', team: 'B', label: 'B1', size: 30 },
{ id: 'B2', team: 'B', label: 'B2', size: 20 },
{ id: 'B3', team: 'B', label: 'B3', size: 20 },
{ id: 'B4', team: 'B', label: 'B4', size: 20 },
// 团队 C
{ id: 'C1', team: 'C', label: 'C1', size: 30 },
{ id: 'C2', team: 'C', label: 'C2', size: 20 },
{ id: 'C3', team: 'C', label: 'C3', size: 20 },
{ id: 'C4', team: 'C', label: 'C4', size: 20 },
],
edges: [
// 团队 A 内部连接
{ source: 'A1', target: 'A2' },
{ source: 'A1', target: 'A3' },
{ source: 'A1', target: 'A4' },
// 团队 B 内部连接
{ source: 'B1', target: 'B2' },
{ source: 'B1', target: 'B3' },
{ source: 'B1', target: 'B4' },
// 团队 C 内部连接
{ source: 'C1', target: 'C2' },
{ source: 'C1', target: 'C3' },
{ source: 'C1', target: 'C4' },
// 团队间的少量连接
{ source: 'A1', target: 'B1' },
{ source: 'B1', target: 'C1' },
],
};
const graph = new Graph({
container: 'container',
data,
node: {
style: {
size: (d) => d.size,
fill: (d) => {
// 不同团队使用不同颜色
const colors = {
A: '#FF6B6B',
B: '#4ECDC4',
C: '#45B7D1',
};
return colors[d.team];
},
labelText: (d) => d.label,
labelPlacement: 'center',
labelFill: '#fff',
},
},
edge: {
style: {
stroke: '#aaa',
},
},
layout: {
type: 'd3-force',
// 配置链接力 - 团队内部节点更靠近
link: {
distance: (d) => {
// 同一团队内的连接距离更短
if (d.source.team === d.target.team) return 50;
// 不同团队间的连接距离更长
return 200;
},
strength: (d) => {
// 同一团队内的连接强度更大
if (d.source.team === d.target.team) return 0.7;
// 不同团队间的连接强度更小
return 0.1;
},
},
// 配置多体力 - 控制节点间的排斥力
manyBody: {
strength: (d) => {
// 团队领导节点(编号1)的排斥力更强
if (d.label.endsWith('1')) return -100;
return -30;
},
},
// 配置碰撞力 - 防止节点重叠
collide: {
radius: 35,
strength: 0.8,
},
// 配置中心力 - 保持图形在画布中心
center: {
strength: 0.05,
},
},
behaviors: ['drag-element-force'],
});
graph.render();

主要配置说明:

  • link.distance:团队内部距离短,团队间距离长
  • link.strength:团队内部连接强度大,团队间连接强度小
  • manyBody.strength:控制节点间排斥力
  • collide:防止节点重叠
  • center:保持整体布局在画布中心

还可以参考 定制不同节点的参数 示例。