介绍
力布局图是理解大量数据以及数据中数据点之间关系的有用工具。这种类型的图由用正方形或圆形表示的元素组成，数据通过模拟推拉力来排列。这让用户可以轻松看到元素之间的关系以及数据集中最重要的元素。
本指南将演示如何使用d3-force包创建力布局图。本指南假设您对 D3.js 有基本的了解。
了解 d3-force 的组件
力布局图的独特之处在于能够模拟几何约束或力内的节点推拉。力是一种功能，可让您控制节点相对于彼此和模拟的大小和位置。d3-force 中大致有五类力：
- 居中：平移节点，使其平均位置位于 x, y 位置。此力可用于将节点置于视口的中心，而不是将它们聚集在角落。
- 碰撞：将节点视为具有半径的圆，并有助于防止它们相互重叠
- 链接：根据链接距离将链接节点推到一起或分开。这对于表示节点之间关系的强度很有用。
- 多体：将所有节点推得更远或将所有节点拉得更近。按照惯例，将节点推得更远的正多体力称为电荷，将节点拉得更近的负力称为重力。
创建简单的力布局图
开始尝试使用 d3-force 的简单方法之一是使用Observable HQ。该网站提供交互式编辑体验，无需您安装任何东西。
首先分叉这个简单的力布局可观察 HQ 示例。此示例基于Daniel Stern 的 GitHub 存储库中的代码和数据。
第一节代码导入了D3.js以及绑定到强制布局图表所需的一些示例数据，图表代码主要部分如下：
{
const simulation = d3.forceSimulation(data.nodes)
.force('charge', d3.forceManyBody().strength(-100))
.force('link', d3.forceLink(data.links).id(d => d.id)
.distance(50))
.force('center', d3.forceCenter(300, 300))
const svg = d3.create("svg").attr("viewBox", [0, 0
, 600, 600]);
const node = svg.selectAll('circle')
.data(data.nodes)
.enter()
.append('circle')
.attr('r', 25)
.attr('fill', 'blue');
const link = svg
.selectAll('path.link')
.data(data.links)
.enter()
.append('path')
.attr('stroke', 'black')
.attr('fill', 'none');
const lineGenerator = d3.line();
simulation.on('tick', () => {
node.attr('cx', d => d.x);
node.attr('cy', d => d.y);
link.attr('d', d => lineGenerator([
[d.source.x, d.source.y],
[d.target.x, d.target.y]])
)
});
return svg.node();
}
输入数据有两个节点，这两个节点有三个作用力：
- 电荷力是一种多体力，它使节点彼此分离。它之所以被称为“电荷”，是因为它代表一种在节点之间产生排斥力的物理电荷。
- 链接力表示节点之间的直接链接。此力可以读取输入数据以改变节点之间的距离。
- 中心力将节点推向视口中间。如果没有这个力，节点就会聚集在角落里。
最后，调用simulation.on('tick',callback)函数来告诉 D3.js 如何在每次模拟滴答后定位节点和链接。其余代码片段是标准 D3.js 代码，为简洁起见，本指南将不再讨论。
更新力量值
在上一节中，您创建了一个简单的力布局图，其中应用了一些力。现在，您可以通过更改每个力的值来进行实验，以获得所需的效果。
改变电荷力的强度会影响所有节点之间的排斥力。负数越大，节点之间的距离越远。正数会使节点之间的距离更近。
中心力接受 x 和 y 位置。您可以将其更改为[200, 100]之类的值，以将节点的质量中心移近顶部。
结论
当您拥有大量数据并希望了解一些有关数据的信息时，部队布局图非常有用。您可以通过查看Observable HQ 上更复杂的部队布局图来巩固这些知识。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
