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建议），然后将文本和圆节点添加到组中：< / p>

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

正在正确添加文本节点，但这些组未转换为图中的正确位置。

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

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

小提琴： http://jsfiddle.net/7br2t162/

向D3力图添加标签

1 个答案: