使用 D3.js 修复力图节点的位置

Question

我正在使用来自 https://github.com/vasturiano/force-graph 的 force-graph D3 可视化。这似乎提供了很好的高级 API 来创建力导向图，但我发现很难自定义，因为我是 Javascript.

的新手

<script src="//unpkg.com/force-graph"></script>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>

<script>

fetch('data.json').then(res => res.json()).then(data => {
      const Graph = ForceGraph()
      (document.getElementById('graph'))
        .graphData(data)
        .nodeAutoColorBy('group')
        .linkSource('source')
        .linkTarget('target')
})

</script>

JSON 数据如下所示：

{
  "nodes": [
    {"id": "Myriel", "group": 1},
    {"id": "Napoleon", "group": 1}
  ],
  "links": [
    {"source": "Napoleon", "target": "Myriel", "value": 1},
    {"source": "Mlle.Baptistine", "target": "Myriel", "value": 8}
  ]
}

我正在尝试修复特定节点的位置，例如 id = Myriel 到 x=500、y=500。根据d3 force documentation，我需要指定fx和fy。如何检索特定节点的 ID 以设置这些属性？非常感谢任何帮助！

Answer 1

你提供的APIlink真漂亮。这是一个非常复杂的图表，它几乎符合每个方框。

但是，看起来让它适应您的需求的唯一方法是侵入我不建议的 js 代码。

就我个人而言，我会从更简单的 d3 版本开始，然后从这里进行自定义。

例如：https://observablehq.com/@d3/force-directed-graph

在这里，您需要自定义 simulation.on("tick" 函数。像这样：

node
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    **.attr("fx", d => d.id === "Myrial" ? 500 : null)**
    **.attr("fy", d => d.id === "Myrial" ? 500 : null);**

`

或者对于与您的示例类似的方法，您可以使用 Vega。这允许您使用 fx 和 fy:

https://vega.github.io/vega/docs/transforms/force/

Answer 2

我找到了解决办法：

.nodeVal(node => {         
  node.fx = 500;
  node.fy = 500
})

使用nodeVal方法，我可以访问节点的属性来修复它。添加 if 语句将允许我仅在它是我需要的特定节点时更改它。感谢大家的帮助！

使用 D3.js 修复力图节点的位置

Fix position of force-graph node using D3.js

javascript

graph

d3.js

d3-force-directed