javascript - 向 D3 力图添加标签

Question

我正在尝试修改 this D3 example为节点添加标签。这是一个fiddle复制示例中的代码。

我认为我需要编辑 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() 函数的节点部分以附加一个组元素(如 this stackoverflow answer 所建议的那样，然后将文本和圆节点都添加到群组:

  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();

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

我已经更新了 fiddle 以显示我当前(无效)的方法。

Answer 1

在您的 tick 函数中，如果您翻译节点而不是组，我相信它会按您预期的那样工作:

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; });
}

fiddle : http://jsfiddle.net/7br2t162/