D3 的力布局使用基于物理的模拟器来定位视觉元素。可以在元素之间设置力，例如：1.所有元素都可以配置为相互排斥;2.元素可以被吸引到重心;3.链接的元素可以设置为固定距离（例如用于网络可视化）;4.元素可以配置为避免相互交叉（碰撞检测）
力布局比其他 D3 布局需要更多的计算量（通常需要几秒钟的时间），并且解决方案是以逐步（迭代）的方式计算的。通常 SVG/HTML 元素的位置会随着模拟的迭代而更新，这就是为什么我们看到圆圈挤在一起的原因。
- 设置力模拟：
设置力模拟有 4 个步骤：
- 创建对象数组
- 调用
forceSimulation，传入对象数组 - 向系统添加一个或多个力函数（例如
forceManyBody,forceCenter,forceCollide） - 设置回调函数以在每个刻度后更新元素位置
var width = 300, height = 300
var nodes = [{}, {}, {}, {}, {}]
var simulation = d3.forceSimulation(nodes)
.force('charge', d3.forceManyBody())
.force('center', d3.forceCenter(width / 2, height / 2))
.on('tick', ticked);
function ticked() {
var u = d3.select('svg')
.selectAll('circle')
.data(nodes)
.join('circle')
.attr('r', 5)
.attr('cx', function(d) {
return d.x
})
.attr('cy', function(d) {
return d.y
});
}
- 力中心(forceCenter)：将元素作为一个整体围绕着中心点居中
//可以用中心位置初始化
d3.forceCenter(100, 100)
//或使用配置功能.x()和.y()
d3.forceCenter().x(100).y(100)
//将其添加到系统中
simulation.force('center', d3.forceCenter(100, 100))
-
forceManyBody：使所有元素相互吸引或排斥。可以设置吸引或排斥的强度。
.strength()正值将导致元素相互吸引，而负值将导致元素相互排斥。默认值为-30。
simulation.force('charge', d3.forceManyBody().strength(-20))
-
力碰撞(forceCollide)：用于阻止圆形元素重叠。在将圆形“聚集”在一起时特别有用。此函数的第一个参数
d是连接数据，您可以从中得出半径。
var numNodes = 100
var nodes = d3.range(numNodes).map(function(d) {
return {radius: Math.random() * 25}
})
var simulation = d3.forceSimulation(nodes)
.force('charge', d3.forceManyBody().strength(5))
.force('center', d3.forceCenter(width / 2, height / 2))
.force('collision', d3.forceCollide().radius(function(d) {
return d.radius
}))
- forceX 和 forceY：导致元素被吸引到指定的位置。可以对所有元素使用一个中心，也可以在每个元素的基础上施加力。
var xCenter = [100, 300, 500];
var simulation = d3.forceSimulation(nodes)
.force('charge', d3.forceManyBody().strength(5))
.force('x', d3.forceX().x(function(d) {
return xCenter[d.category];
}))
.force('collision', d3.forceCollide().radius(function(d) {
return d.radius;
}));
可以使用forceX或forceY沿轴定位元素
var simulation = d3.forceSimulation(nodes)
.force('charge', d3.forceManyBody().strength(5))
.force('x', d3.forceX().x(function(d) {
return xScale(d.value);
}))
.force('y', d3.forceY().y(function(d) {
return 0;
}))
.force('collision', d3.forceCollide().radius(function(d) {
return d.radius;
}));
- 力链接(forceLink)：将链接的元素推到一个固定的距离。它需要一组链接来指定您希望将哪些元素链接在一起。每个链接对象指定一个源元素和目标元素，其中值是元素的数组索引：
var links = [
{source: 0, target: 1},
{source: 0, target: 2},
{source: 0, target: 3},
{source: 1, target: 6},
{source: 3, target: 4},
{source: 3, target: 7},
{source: 4, target: 5},
{source: 4, target: 7}
]
var simulation = d3.forceSimulation(nodes)
.force('charge', d3.forceManyBody().strength(-100))
.force('center', d3.forceCenter(width / 2, height / 2))
.force('link', d3.forceLink().links(links));
//可以使用.distance()（默认值为 30）和配置链接元素的距离和强度.strength()。
