在 D3 中创建力布局图

2020-09-24 08:00:00 · 飞浪

使用 d3-force 包创建的力布局图有助于理解元素与大型数据集中最重要元素之间的关系。

介绍

力布局图是理解大量数据以及数据中数据点之间关系的有用工具。这种类型的图由用正方形或圆形表示的元素组成，数据通过模拟推拉力来排列。这让用户可以轻松看到元素之间的关系以及数据集中最重要的元素。

本指南将演示如何使用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 上更复杂的部队布局图来巩固这些知识。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

在 D3 中创建力布局图

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

{ 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(); }