javascript - 节点标签不工作 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})`);

这是工作 fork plunkr