D3.js d3js图形可视化中的空节点

我是d3.js的初学者，在使用d3.v3创建图形时遇到了一个奇怪的问题。我错过了索引为0的节点

以下是console.loggnode的输出：

这是我的代码：

var svg_graph = svg.append('svg:g')
var vis = svg_graph.append("svg:g");
gnode = vis.selectAll("g").data(graph.nodes).enter().append("g")
node = gnode.append("circle")
       .attr("r", 8)
       .attr('fill', '#fc434b')
       .attr('id', 'node')

如果我按照下面的方式编写代码，问题就解决了，但是我需要添加g，以便稍后向每个节点添加文本

gnode = vis.selectAll("circle").data(graph.nodes).enter().append("circle")
node = gnode.attr("r", 8)
       .attr('fill', '#fc434b')
       .attr('id', 'node')

首先，不要使用V3，它已经过时了。使用V5或更高版本

D3进入/退出模式的常见情况是：

selectAll(...).data(items, item => item.id).enter()

，其中第二个数据参数指定了渲染对象的标识方式。因此，您的数据应该如下所示：

[
  {id: 1, ...},
  {id: 2, ...},
  ...
  {id: N, ...}
]

，其中id属性在输入对象的范围内是唯一的

---

检查data graph.nodes是否有效。

执行以下操作：gnode=vis.selectAllnull.datagraph.nodes.enter.appendg。有关详细说明，请点击这里：太棒了，谢谢！问题解决了。

[
  {id: 1, ...},
  {id: 2, ...},
  ...
  {id: N, ...}
]