javascript - 如何动态更新 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

Answer 1

我会在这里做一些改变。首先，将 rect 和 text 包裹在一个 g 中，因此您只需要数据绑定(bind)一次。然后你可以自由地将它们一起过渡:

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

---

已更新 fiddle .

---

编辑

要转换文本，您可能必须使用 custom tween function :

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

更新了，更新了fiddle .