d3 v4垂直条形图问题，条形文字

Question

我正在尝试在条形图的顶部添加简单的文本，尝试添加用于条形图的相同的x和y坐标以添加文本，但是对于某些项它不起作用，我知道这很简单，但无法捕捉它，有人可以指出这个错误吗？非常感谢您的帮助。 StackBlitz code

Answer 1

简单的 d3选择输入/更新问题。如果您查看控制台，您会更好地了解为什么无法查看文本。这是因为这些文本被附加到rect

将 d3输入选择代码更改为：

const bar = svg
  .selectAll('.bar')
  .data(chartData)
  .enter().append('g').attr('class', 'bar');

bar
  .append('rect')
  .attr('x', d => this._xScale(d.name))
  ....

bar
  .append('text')
  .attr('class', 'barText')
  ...

现在，如果您检查控制台，您会发现text是<g>和{的组rect（归类为 bar ）的一部分{1}}作为单独的元素。这是在文本中附加文本的方式。

叉子：StackBlitz bar chart fork

希望这会有所帮助。