d3Force's d3.forceLink error: node not found: <node id here>

Question

我看到了这个相关的解决方案

但我在标题中收到错误 - “VM2128 d3-force-3d:2 未捕获错误：未找到节点：golfing_4_1”

function setNodeId(node) {
  return node.id; }

Graph.d3Force('link', d3.forceLink(graphData.links)
  .id( (d,i) => setNodeId(d) )
  // .strength( d => linkStrength(d) )
);

显然（？）使用版本 2.1.1 的 d3-force。可能连 d3 本身都没有

可重现性最低的代码：

const graphData = {
  nodes: [{
      id: "Alice"
    },
    {
      id: "Bob"
    },
    {
      id: "George"
    }
  ],
  links: [{
      source: "Alice",
      target: "George"
    },
    {
      source: "George",
      target: "Bob"
    }
  ]
};

const elem = document.getElementById('3d-graph');
const Graph = ForceGraph3D()(elem)
  .graphData(graphData);

function setNodeId(node) {
  return node.id;
}

function linkStrength(link) {
  return (1 / link.sourceLevel);
}
Graph.d3Force('link', d3.forceLink(graphData.links)
  .id((d, i) => setNodeId(d))
  // .distance(200)
  // .strength( d => linkStrength(d) )
);

<script src="https://unpkg.com/d3-force-3d"></script>
<script src="https://unpkg.com/3d-force-graph"></script>
<div id="3d-graph"></div>

Answer 1

潜在的问题是您需要将整个 graphData 传递给您的 d3.forceLink 函数，而不仅仅是 graphData.link。但是，我认为以下解决方案更清晰：

来自 3d-force-graph 的 Graph.d3Force() 文档：

Getter/setter for the internal forces that control the d3 simulation engine. Follows the same interface as d3-force-3d's simulation.force. Three forces are included by default: 'link' (based on forceLink), 'charge' (based on forceManyBody) and 'center' (based on forceCenter).

这意味着你可以只用一个字符串'link'调用函数，你得到一个d3-force-3d.forceLink类型的对象，它是自动应用的，因此自动有权访问[=12] =].然后，您可以像之前一样设置forceLink.id，但您也可以稍后再设置。

const graphData = {
  nodes: [{
      id: "Alice"
    },
    {
      id: "Bob"
    },
    {
      id: "George"
    }
  ],
  links: [{
      source: "Alice",
      target: "George"
    },
    {
      source: "George",
      target: "Bob"
    }
  ]
};

const elem = document.getElementById('3d-graph');
const Graph = ForceGraph3D()(elem)
  .graphData(graphData);

function setNodeId(node) {
  return node.id;
}

const linkForce = Graph.d3Force('link')
  .id((d, i) => setNodeId(d));

<script src="https://unpkg.com/d3-force-3d@2.2.0/dist/d3-force-3d.js"></script>
<script src="https://unpkg.com/3d-force-graph@1.67.3/dist/3d-force-graph.js"></script>
<div id="3d-graph"></div>

d3Force's d3.forceLink error: node not found: <node id here>

d3Force's d3.forceLink error: node not found: <node id here>

d3.js

d3-force-directed