D3 的力布局使用基于物理的模擬器來定位視覺元素〗矗可以在元素之間設(shè)置力绕辖，例如：1.所有元素都可以配置為相互排斥;2.元素可以被吸引到重心;3.鏈接的元素可以設(shè)置為固定距離（例如用于網(wǎng)絡(luò)可視化）;4.元素可以配置為避免相互交叉（碰撞檢測）
力布局比其他 D3 布局需要更多的計(jì)算量（通常需要幾秒鐘的時(shí)間）脓诡，并且解決方案是以逐步（迭代）的方式計(jì)算的无午。通常 SVG/HTML 元素的位置會隨著模擬的迭代而更新，這就是為什么我們看到圓圈擠在一起的原因祝谚。
- 設(shè)置力模擬：
設(shè)置力模擬有 4 個(gè)步驟：
- 創(chuàng)建對象數(shù)組
- 調(diào)用
forceSimulation宪迟，傳入對象數(shù)組 - 向系統(tǒng)添加一個(gè)或多個(gè)力函數(shù)（例如
forceManyBody,forceCenter,forceCollide） - 設(shè)置回調(diào)函數(shù)以在每個(gè)刻度后更新元素位置
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)：將元素作為一個(gè)整體圍繞著中心點(diǎn)居中
//可以用中心位置初始化
d3.forceCenter(100, 100)
//或使用配置功能.x()和.y()
d3.forceCenter().x(100).y(100)
//將其添加到系統(tǒng)中
simulation.force('center', d3.forceCenter(100, 100))
-
forceManyBody：使所有元素相互吸引或排斥〗还撸可以設(shè)置吸引或排斥的強(qiáng)度次泽。
.strength()正值將導(dǎo)致元素相互吸引，而負(fù)值將導(dǎo)致元素相互排斥席爽。默認(rèn)值為-30意荤。
simulation.force('charge', d3.forceManyBody().strength(-20))
-
力碰撞(forceCollide)：用于阻止圓形元素重疊。在將圓形“聚集”在一起時(shí)特別有用只锻。此函數(shù)的第一個(gè)參數(shù)
d是連接數(shù)據(jù)玖像，您可以從中得出半徑。
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：導(dǎo)致元素被吸引到指定的位置炬藤∮澹可以對所有元素使用一個(gè)中心，也可以在每個(gè)元素的基礎(chǔ)上施加力沈矿。
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)：將鏈接的元素推到一個(gè)固定的距離上真。它需要一組鏈接來指定您希望將哪些元素鏈接在一起。每個(gè)鏈接對象指定一個(gè)源元素和目標(biāo)元素羹膳，其中值是元素的數(shù)組索引：
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()（默認(rèn)值為 30）和配置鏈接元素的距離和強(qiáng)度.strength()睡互。
