javascript - d3.js 带标签强制折叠

Question

实际上，我已经在有界力定向图中集成了可折叠功能。但是当我尝试在每个节点上放置标签时，我得到了意外的输出。

我使用以下代码在节点上附加标签:

  node.enter().append("text")
            .attr("class","node")
            .attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; })
            .on("click",click)
            .text(function(d){return d.name})
            .call(force.drag);

下面是我在勾选函数中编写的代码:

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

我可能做错了什么？

Answer 1

我需要附加 g 标签，然后添加圆圈和文本:

  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .on("click", click)
      .call(force.drag);

  nodeEnter.append("circle")
      .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 8.5; });

  nodeEnter.append("text")
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });

  node.select("circle")
      .style("fill", color);