d3 v4 вертикальная гистограмма с текстом на столбцах

Question

Я пытаюсь добавить простой текст поверх столбцов, пытался добавить те же координаты x и y, которые использовались для столбцов, чтобы добавить текст, но для некоторых это не работает, я знаю, что это просто, но не удается поймать это, может кто-то, пожалуйста, указать на ошибку ?, любая помощь высоко ценится. код StackBlitz

Answer 1

Простой d3 выбор ввод / обновление выпуск. Если вы посмотрите на консоль, вы получите лучшее представление о том, почему вы не смогли просмотреть тексты. Это потому, что тексты были добавлены к rect s

Изменение ввода 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 s являются частью группы <g> (классифицируется bar ) с rect и text в качестве отдельных элементов. Так вы добавляете текст в прямоугольнике.

Вилка: Вилка гистограммы StackBlitz

Надеюсь, это поможет.