节点标签不起作用d3 v5 [重复]

Question

我正在尝试在我的节点中添加标签，但这似乎不起作用。

//draw circles for the nodes
var node = g.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(nodes_data)
    .enter()
    .append("circle")
    .attr("r", radius)
    .attr("fill", circleColour);
node.append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text(function (d) { return d.name });

当我检查节点的元素时，我可以看到节点内的文本：

<circle r="15" fill="blue" style="touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" cx="421.4930863434973" cy="221.26393165638473"><text dx="12" dy=".35em">some name</text></circle>

但它不会显示在图表中。任何人都可以在这里帮助我吗？ 这是完整的 plunkr:

Answer 1

每个定义的圈子只能有动画元素和描述性元素作为内容。所以你不能把文字放在圆圈里。

解决方案是为每个节点添加多个 g 元素，然后在其中添加圆形和文本元素。

var node = g.selectAll('.nodes')
  .data(nodes_data)
  .enter().append('g')
  .attr('class', 'nodes')

node.append('circle')
    .attr("r", radius)
    .attr("fill", circleColour)

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

然后在打勾

node.attr('transform', d => `translate(${d.x},${d.y})`);

这里正在工作分叉plunkr