我如何影响 3d-force-graph 中的 link 距离？

Question

我正在 this package 中试用 3d 力图，我正在寻找影响节点间结合强度的方法。 link 宽度或长度都可以，但我在 API 中看不到任何可以让我控制或影响的内容。 Graph 传递 link 强度的正确字段是什么，每个 link 一个？

Answer 1

这是此 example 的修改版本，它根据 link:

应用自定义距离

const N = 300;
const gData = {
  nodes: [...Array(N).keys()].map(i => ({ id: i })),
  links: [...Array(N).keys()]
    .filter(id => id)
    .map(id => {

      var distance = (Math.random() < 0.2) ? 75 : 250;
      var width = (distance == 75) ? 4 : 0.2;

      return ({
        source: id,
        target: Math.round(Math.random() * (id-1)),
        width: width,
        distance: distance
      })
    })
};

const Graph = ForceGraph3D()
  (document.getElementById('3d-graph'))
    .graphData(gData)
    .linkWidth('width')
    .cameraPosition({ z: 600 })
    .d3Force("link", d3.forceLink().distance(d => d.distance))
    .d3Force("charge", d3.forceManyBody().theta(0.5).strength(-1));

<head>
  <style> body { margin: 0; } </style>

  <script src="//unpkg.com/3d-force-graph"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <div id="3d-graph"></div>
</body>

实际上，为了允许用户修改links参数，该库简单地使用了d3 force API. The only difference is the name of the accessor in the 3d-force-graph库，即.d3Force()（而不是d3中的.force() ).

例如，要修改每个 link 的距离，我们可以为每个 link 数据点添加一个 distance 属性（除了 source 和 target)，然后在力布局中修改此距离（使用 d3Force 访问器）：

.d3Force("link", d3.forceLink().distance(d => d.distance))

而在 d3 force 布局中我们会使用：

.force("link", d3.forceLink().distance(d => d.distance))

这给了我们：

const Graph = ForceGraph3D()
  (document.getElementById('3d-graph'))
    .graphData(gData)
    .linkWidth('width')
    // The link distance modification:
    .d3Force("link", d3.forceLink().distance(d => d.distance))
    // To make it prettier:
    .d3Force("charge", d3.forceManyBody().theta(0.5).strength(-1));

强度可以用同样的方法调整，使用：

.d3Force("link", d3.forceLink().strength(d => d.strength))

在这个例子中，我给了每个 link 一个随机的 75 或 250 的距离。为了清楚起见，我给 link 一个更大的宽度，一个更小的宽度距离。我演示中的节点分布并不完美，可能需要额外调整。

我如何影响 3d-force-graph 中的 link 距离？

How do I influence link distance in 3d-force-graph?

javascript

three.js

d3.js

d3-force-directed