javascript - 在 D3js Sunburst 上添加标签

Question

我是 d3js 新手，我正在尝试在 D3js v4 Sunburst 上添加一些标签，如下所示:

你知道如何做到这一点吗？我没有找到任何可以帮助我的东西。

我使用了这个例子https://bl.ocks.org/kerryrodden/766f8f6d31f645c39f488a0befa1e3c8帮助我实现旭日。

Answer 1

您可以尝试以下计划:

据我了解，您希望根据某些条件在特定的弧上放置标签或手动选择它们。所以你会得到这样的节点子集:

var nodesForLabels = nodes.filter(d => d.value > 1)

之后，您需要将文本标签放置在弧的质心中:

vis.selectAll('.label').data(nodesForLabels).enter().append('text')
  .attr('x', d => arc.centroid(d)[0])
  .attr('y', d => arc.centroid(d)[1])
  .attr('text-anchor', 'middle')
  .text(d => Math.round(d.value / partition.value * 100) + '%')