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

Question

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

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

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

我认为附加文本应该放在绘图栏函数中不是吗？

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();
}