如何在d3中动态更新文本标签？

Question

我想在我的垂直条形图中添加标签，显示与当前柱高对应的当前百分比值。 因此，我需要不断更新百分比值，并且还需要过渡来使文本元素与柱状图同步移动。 我尝试过这个：

var percentageLabels = svg.selectAll(".percentage-label")
    .data(dataset);

    percentageLabels.remove();

    percentageLabels
    .enter()
    .append("text")
            .attr("class", "percentage-label")
            .style("fill", "white")
    .text(function(d) {
        return d;
    })
    .attr("y", function(d) {
        return y(d);
    })
    .attr("x", function(d, i) {
        return i * (w / dataset.length) + 2.5 / 100 * w + w * 10/100;
    })
    .transition().duration(1750).ease("linear")
    .attr("y", function(d) {
                    return y(d);
    });

请查看这个fiddle。

- Andreas Dominguez

Answer 1

我建议做出一些改变。首先，将rect和text放在一个

var uSel = svg.selectAll(".input")
    .data(dataset); //<-- selection of gs

uSel.exit().remove(); //<-- anybody leaving?  remove g (both rect and text)

var gs = uSel
    .enter()
    .append("g")
    .attr("class", "input"); //<-- enter selection, append g

gs.append("rect")
    .attr("fill", "rgb(250, 128, 114)"); //<-- enter selection, rect to g

gs.append("text")
    .attr("class", "percentage-label")
    .style("fill", "white")
    .attr("x", function(d, i) {
        return i * (w / dataset.length) + 2.5 / 100 * w + w * 10/100;
    }); //<-- enter selection, text to g

uSel.select("rect")
    .attr("x", function(d, i) {
        return i * (w / dataset.length) + 2.5 / 100 * w;
    })
    .attr("width", w / dataset.length - barPadding)
    .attr("height", y(0))
    .transition().duration(1750).ease("linear")
    .attr("y", function(d) {
        return y(d);
    })
    .attr("height", function(d) {
        return h - y(d);
    }); //<-- update rects with transition

uSel.select("text")
            .transition().duration(1750).ease("linear")
            .attr("y", function(d) {
                    return y(d);
            })
    .text(function(d) {
        return d + "%";
    }); //<-- update text with transition

---

更新的代码片段。

---

编辑

为了过渡文本，您可能需要使用自定义缓动函数：

uSel.select("text")
    .transition().duration(1750).ease("linear")
    .attr("y", function(d) {
        return y(d); //<-- move the text
    })
    .tween("", function(d) {
      var self = d3.select(this),
          oldValue = y.invert(self.attr("y")), //<-- get the current value
          i = d3.interpolateRound(oldValue, d); //<-- interpolate to new value        
      return function(t) {
        self.text(i(t) + '%') <-- update the text on each iteration
      };
    });     

最新的更新，更新的代码示例.

- Mark

---

谢谢！很棒的解决方案！我离我想要实现的目标更近了。 - Andreas Dominguez

但是我希望标签显示其当前高度的值。现在它显示的是它将要过渡到的值。我希望它像一个计数器一样。从一个过渡点到另一个过渡点逐个计数所有数字。抱歉，我没有表达清楚。 - Andreas Dominguez

Answer 2

你可能想要查看这个链接：https://github.com/mbostock/d3/wiki/Transitions#tween。

- Andreas Daiminger

Answer 3

从文档中：

transition.each方法可用于链接转换并在一组转换中应用共享时间。例如：

d3.transition()
    .duration(750)
    .ease("linear")
    .each(function() {
        d3.selectAll(".foo").transition()
       .style("opacity", 0)
       .remove();
    })
   .transition()
   .each(function() {
      d3.selectAll(".bar").transition()
      .style("opacity", 0)
      .remove();
   });

- Damien Fayol