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

将文字附加到d3js中的动画条形图

1 个答案: