Question

我正在尝试将JSON文件中名称字段中的一些文本添加到群集中的每个气泡。

https://plnkr.co/edit/hwxxG34Z2wYZ0bc51Hgu?p=preview

我已经使用

添加了我认为正确的属性到节点

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

}

除标签外，一切正常。我在这里缺少什么？

由于千电子伏

Answer 1

为此你需要建立一个这样的小组：

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

向群组添加圈子。

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

将补间添加到组中的圆圈，如下所示：

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

现在，tick方法将转换组，并且对于组，圆圈和文本将占据其位置。

工作代码here

Answer 2

问题：text SVG元素不能是circle 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);

以下是plunker：https://plnkr.co/edit/qnx7CQox0ge89zBL9jxc?p=preview

如何将文本添加到Cluster Force Layout气泡

2 个答案: