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

节点标签不工作d3 v5

1 个答案: