javascript - 在 d3js 中将文本附加到动画条形图

Question

我正在尝试在 d3js 条形图的条形末尾添加一些文本。

条形图有延迟过渡。源代码可以在这里找到 https://bl.ocks.org/deciob/ffd5c65629e43449246cb80a0af280c7 .

不幸的是，我的代码下面的文本没有遵循条形码，我不确定我做错了什么。

我认为附加文本应该放在 drawBars 函数中，不是吗？

function drawBars(el, data, t) {
      let barsG = el.select('.bars-g')
      if (barsG.empty()) {
        barsG = el.append('g')
          .attr('class', 'bars-g');
          }

      const bars = barsG
        .selectAll('.bar')
        .data(data, yAccessor);

bars.exit()
        .remove();
bars.enter()
        .append('rect')
          .attr('class', d => d.geoCode === 'WLD' ? 'bar wld' : 'bar')
          .attr('x', leftPadding)
          .attr('fill', function (d) {return d.geoColor;})

bars.enter()
        .append('text')
          .attr('x', d => xScale(xAccessor(d)))
          .attr('y', d => yScale(yAccessor(d)))
          .text('Hello')

        .merge(bars).transition(t)
          .attr('y', d => yScale(yAccessor(d)))
          .attr('width', d => xScale(xAccessor(d)))
          .attr('height', yScale.bandwidth())
          .delay(delay)
}

我想要实现的是让文本跟随条形图(以及稍后将文本更新为另一个值)。

感谢您的帮助。

Answer 1

找到答案，对于任何想知道您需要创建一个新函数(例如:drawText())并稍后在调用 drawBars() 函数的下方调用它的人:

function drawText(el, data, t) {
          var labels = svg.selectAll('.label')
              .data(data, yAccessor);

          var new_labels = labels
              .enter()
              .append('text')
              .attr('class', 'label')
              .attr('opacity', 0)
              .attr('y', d => yScale(yAccessor(d)))
              .attr('fill', 'blue')
              .attr('text-anchor', 'middle')

          new_labels.merge(labels)
              .transition(t)
              .attr('opacity', 1)
              .attr('x', d => xScale(xAccessor(d))+50)
              .attr('y', d => yScale(yAccessor(d)))
              .text(function(d) {
                  return d.value;
              });

          labels
              .exit()
              .transition(t)
              .attr('y', height)
              .attr('opacity', 0)
              .remove();
}