Javascript 向D3力图添加标签

我正在尝试修改以向节点添加标签。下面是一个复制示例代码的示例

我认为我需要编辑

start（）

函数，因为每次节点和边缘数据更新时都会调用该函数：

function start() {
  link = link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; });
  link.enter().insert("line", ".node").attr("class", "link");
  link.exit().remove();

  node = node.data(force.nodes(), function(d) { return d.id;});
  node.enter().append("circle").attr("class", function(d) { return "node " + d.id; }).attr("r", 8).call(force.drag);
  node.exit().remove();

  force.start();
}

我已尝试重新编写

start（）

函数的节点部分，以附加一个组元素（如所建议的，然后将文本和圆圈节点添加到组中：

  node = node.data(force.nodes(), function(d) { return d.id;});

  // Append a group element
  node.enter().append("g");

  // Append text to the group element
  node.append("text").text(function(d) { return d.id ;});

  // Append circle to the group element
  node.enter().append("circle")
    .attr("class", function(d) { return "node " + d.id; })
    .attr("r", 8);

  // Transform the group to proper location
  node.attr("transform", function(d) {
    return 'translate(' + [d.x, d.y] + ')';
  });

  node.exit().remove();

文本节点已正确添加，但组未转换到图中的正确位置

---

我已经更新了小提琴，以显示我当前的（非工作）方法。

在你的勾号功能中，如果你翻译节点而不是组，我相信它会像你预期的那样工作：

function tick() {

  node.attr("transform", function(d) {
    return 'translate(' + [d.x, d.y] + ')'; 
  });


  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });
}

小提琴：

---

在我看来，您的文本似乎正在添加到圆圈中，但圆圈不包含在组中。请使用您的浏览器工具进行检查。但我不确定具体如何修复它。1.为什么不将您尝试的解决方案代码包含在尝试的解决方案小提琴中？2.结构元素的位置与勾号函数中的数据。您需要对g元素应用变换，而不是直接定位圆圈。感谢@CoolBlue！我已将链接更新为我尝试的链接。感谢帮助！我认为这差不多了，但在D3示例中，节点应该在6秒后重新出现。这没有发生g、 有什么想法吗？在控制台中，当试图添加以下内容时，在这一行给出一个“找不到”错误：link.enter（）.insert（“line”，“node”）.attr（“class”，“link”）。如果删除函数中的链接推送，您可以看到圆被正确地添加回。我将对它进行一次尝试，看看是否可以解决。最终出现了很多问题，但主要问题与我引用链接的方式有关。我使用对象作为值，而不是节点数组中的索引。我我对我的解决方案不太满意，但如果它对其他人有帮助的话，这里有一些建议。