Javascript d3.js：强制布局是否只适用于圆？

我正在使用d3.force设置节点，并将链接连接到每个节点。当我使用圆作为节点时，这一切都非常有效：

  var nodes = [{ title: "ABC", group: 1 }, { title: "DEF", group: 1 }, { title: "Blah", group: 1 }];
  var links = [{ source: 0, target: 1 }, { source: 0, target: 2 }];

  var force = d3.layout.force()
    .charge(-120)
    .linkDistance(function(d) {
      console.log(d);
      return 250 * Math.random() + 100;
    })
    .size([r, r]);

  force.links(links)
    .nodes(nodes)
    .start();

  var link = svg.selectAll("line.link")
    .data(links)
    .enter()
    .append("line")
    .attr("class", "link")
    .style("stroke-width", 1);

  var node = svg.selectAll("circle.node")
    .data(nodes)
    .enter()
    .append("circle")
    .attr("class", "node")
    .attr("r", 15)
    .call(force.drag);

但是，如果我将节点更改为使用“g”，它将停止工作：

  var node = svg.selectAll("g.node")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node")
    .attr("r", 15)
    .call(force.drag);

  var circle = node.append("circle")
    .attr("fill", function(d) {
      var b = Math.floor(255 * Math.random()),
          rgba = "rgba(0, 0, " + b + ", 0.7)";

      return rgba;
    })
    .attr("r", 15);

我可以看到圆被添加到g元素中，但它们不在它们应该在的位置，并且它们没有通过链接连接

我真的希望使用“g”元素作为节点，这样我就可以向其中添加文本。有人对此有什么见解吗

或者，如果有办法将文本添加到“圆”元素中。我对此也持开放态度

---

谢谢

尝试将此语句合并为一个语句，并在末尾调用：

var node = svg.selectAll("g.node")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node")
    .append("circle")
    .attr("fill", function(d) {
       var b = Math.floor(255 * Math.random()),
       rgba = "rgba(0, 0, " + b + ", 0.7)";
       return rgba;
     })
    .attr("r", 15)
    .call(force.drag);

---

然后您可以附加其他元素，例如文本。

Ahh添加文本时我仍然遇到问题。因此，在圆的周围添加一个“g”包装器可以很好地工作，但是，当我尝试将文本附加到“g”时，它破坏了力定向图。甚至可以将文本添加到力定向图中吗？