分享
Force

在传统的数据可视化中，我们习惯了在平面上观察节点与连线。但当数据关系变得复杂时，平面图表往往显得拥挤不堪，关键信息被埋没在密密麻麻的线条中。

最近发现了一个名为3D Force Graph的开源项目，它基于ThreeJS和WebGL，能够将复杂的网络关系在三维空间中自然展开，就像观察一个微观宇宙一样。

从平面到立体的思维转换

传统的力导向图算法在处理大规模网络数据时，经常面临节点重叠、边线交叉的问题。而3D Force Graph通过引入第三个维度，为数据提供了更多的空间。节点可以在Z轴上自由分布，连线在三维空间中寻找最佳路径，整个网络的层次感变得清晰起来。

用户可以通过旋转、缩放来从不同角度观察数据，就像在显微镜下观察分子结构一样，每个角度都可能揭示新的规律。

底层使用ThreeJS处理3D渲染，WebGL确保了流畅的图形性能，而物理引擎则可以在d3-force-3d和ngraph之间选择。

特别值得一提的是其力学仿真系统。在三维空间中，节点之间的引力和斥力关系变得更加复杂，但项目通过精心调校的算法参数，让整个网络能够达到一个自然的平衡状态。

案例演示

基础功能

<head>
  <style> body { margin: 0; } </style>
 
  <script src="//cdn.jsdelivr.net/npm/3d-force-graph"></script>
</head>
 
<body>
  <div id="3d-graph"></div>
 
  <script>
    // Random tree
    const N = 300;
    const gData = {
      nodes: [...Array(N).keys()].map(i => ({ id: i })),
      links: [...Array(N).keys()]
        .filter(id => id)
        .map(id => ({
          source: id,
          target: Math.round(Math.random() * (id-1))
        }))
    };
 
    const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
        .graphData(gData);
  </script>
</body>

大图

<head>
  <style> body { margin: 0; } </style>
 
  <script src="//cdn.jsdelivr.net/npm/3d-force-graph"></script>
</head>
 
<body>
 
  <div id="3d-graph"></div>
 
  <script>
    const elem = document.getElementById('3d-graph');
 
    const Graph = new ForceGraph3D(elem)
      .jsonUrl('../datasets/blocks.json')
      .nodeAutoColorBy('user')
      .nodeLabel(node => `${node.user}: ${node.description}`)
      .onNodeClick(node => window.open(`https://bl.ocks.org/${node.user}/${node.id}`, '_blank'));
  </script>
</body>

收起/展开

源码：https://github.com/vasturiano/3d-force-graph/blob/master/example/expandable-nodes/index.html (opens in a new tab)

力导向

源码：https://github.com/vasturiano/3d-force-graph/blob/master/example/tree/index.html (opens in a new tab)

写在最后

这个项目的价值不仅在于它提供了一个优秀的工具，更重要的是它代表了数据可视化领域的一种新思路。随着数据复杂度的不断增加，我们需要更丰富的视觉语言来表达数据之间的关系。

数据可视化的本质是帮助人们理解信息。当传统的图表形式难以胜任时，我们需要寻找新的表达方式。

DvgisGlobalgl