d3.js 中的补间文本 - 向上计数

Question

I am trying to update the text in a d3v4 element - so it counts up -- it appears this.textContent is null? I've been trying to use this._current - but nothing appears to work.

http://jsfiddle.net/hgka8w5q/

.duration(3000)
    .tween("text", function(d) {
        console.log(this.textContent)
    
        var i = d3.interpolate(this.textContent, d),
            prec = (d + "").split("."),
            round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1;

        return function(t) {
            this.textContent = Math.round(i(t) * round) / round;
        };
    });

https://observablehq.com/@d3/transition-texttween

  .transition()
    .duration(5000)
    .textTween(function(d) {
      const i = d3.interpolate(this._current, d);
      return function(t) { return format(this._current = i(t)); };
    })

Answer 1

this was the solution that worked in d3v4.

    var text = svg.append("text")
        .data(data)
        .attr("x", 0)
        .attr("y", 0)
        .attr("text-anchor", "middle")
        .attr("dominant-baseline", "central")
        .text(0)
        .transition()
        .duration(3000)
        .tween("text",function(d) {
            var self = this;
            var i = d3.interpolate(this.textContent, d.value);
            var prec = (d + "").split(".");
            var round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1;

            return function(t) {
                self.textContent = Math.round(i(t) * round) / round;
            }; 
        });

and this code would animate a type text.

            //typing text animation
            var self = this;
            var newText = "hellob";
            var textLength = newText.length;
            return function(t) {
                self.textContent = newText.slice(0, Math.round(t * textLength));
            };