D3.js 如何将文本添加到群集强制布局气泡

我试图将JSON文件中name字段中的一些文本添加到集群中的每个气泡中

我已将我认为正确的属性添加到具有

node.append("text")
    .text(function (d) {
    return d.name;
})
.attr("dx", -10)
.attr("dy", "5em")
.text(function (d) {
    return d.name
})
.style("stroke", "white");

    function tick(e) {
    node.each(cluster(10 * e.alpha * e.alpha))
    .each(collide(.5))
    .attr("transform", function (d) {
        var k = "translate(" + d.x + "," + d.y + ")";
    return k;
})

}

除了标签外，一切正常。 我错过了什么

谢谢

---

Kev

为此，您需要组建这样的团队：

  var node = svg.selectAll("g")
    .data(nodes)
    .enter().append("g").call(force.drag);//add drag to the group

  node.selectAll("circle").transition()
    .duration(750)
    .delay(function(d, i) {
      return i * 5;
    })
    .attrTween("r", function(d) {
      var i = d3.interpolate(0, d.radius);
      return function(t) {
        return d.radius = i(t);
      };
    });

向组中添加圆圈

var circles = node.append("circle")
    .style("fill", function(d) {
      return color(d.cluster);
    })

向组中添加文本：

  node.append("text")
    .text(function(d) {
      return d.name;
    })
    .attr("dx", -10)
    .text(function(d) {
      return d.name
    })
    .style("stroke", "white");

将吐温添加到分组中的圆圈中，如下所示：

  var node = svg.selectAll("g")
    .data(nodes)
    .enter().append("g").call(force.drag);//add drag to the group

  node.selectAll("circle").transition()
    .duration(750)
    .delay(function(d, i) {
      return i * 5;
    })
    .attrTween("r", function(d) {
      var i = d3.interpolate(0, d.radius);
      return function(t) {
        return d.radius = i(t);
      };
    });

现在，勾号方法将平移组，并且随着组的移动，圆圈和文本将占据其位置

---

工作代码

问题：一个

文本

SVG元素不能是

圆

SVG元素的子元素

解决方案是为文本创建另一个选择：

var nodeText = svg.selectAll(".nodeText")
    .data(nodes)
    .enter().append("text")
    .text(function (d) {
        return d.name;
    })
    .attr("text-anchor", "middle")
    .style("stroke", "white")
    .call(force.drag);

---

这是我的建议：

谢谢Gerardo，我读了你发布的链接，特别是“了解SVG元素可以容纳孩子们的内容”，这让我想到了一些东西，但大部分还是坚持住了。别担心，@Kevin。请考虑一下我的答案，并把西里尔的答案标记为正确的答案，因为使用组是一个更优雅的解决方案（这是对未来读者的）。使用组的解决方案肯定更优雅。谢谢西里尔，这对我来说更有意义，但是现在当你抓住一个圆圈并拖动它时，群集不会保持群集。其他的不遵循，它不会重新群集。您创建群集的方式不正确，我已修复它，这是拖动失败的根本原因。有关详细信息，请参阅此