Qfyilyi

I am new to d3. I created a bar chart. Append text and percentage in the bar chart with animation. When bar chart draw then the number and percentage go from bottom to top to the desired location. Here is the code

svg.selectAll(".bar")

    .data(data)

    .enter()

    .append("g")

    .attr("class", "g rect")

    .append("rect")

    .attr("class", "bar")

    .attr("x", function(d) { return x(d.label); })

    .attr("y", h)

    .on("mouseover", onMouseOver) //Add listener for the mouseover event

    ... // attach other events

    .transition()

    .ease(d3.easeLinear)

    .duration(2000)

    .delay(function (d, i) {

        return i * 50;

    })

    .attr("y", function(d) { return y(d.percentage.slice(0, -1)); })

    .attr("width", x.bandwidth() - 15)  // v4’s console.log(bands.bandwidth()) replaced v3’s console.log(bands.rangeband()).

    .attr("height", function(d) { return h - y(d.percentage.slice(0, -1)); })   // use .slice to remove percentage sign at the end of number

    .attr("fill", function(d) { return d.color; });



    var legend = svg.append("g");



    svg.selectAll(".g.rect").append("text")

        .text(function(d) { return d.value })

        .attr("x", function(d) { return x(d.label) + x.bandwidth() / 2 - 15; })

        .attr("y", h)

        .transition()

        .ease(d3.easeLinear)

        .duration(2000)

        .attr("y", function(d) { return y(d.percentage.slice(0, -1) / 2);})         // use slice to remove percentage sign from the end of number

        .attr("dy", ".35em")

        .style("stroke", "papayawhip")

        .style("fill", "papayawhip");



    svg.selectAll(".g.rect").append("text")

        .text(function(d) { return d.percentage; })

        .attr("x", function(d) { return x(d.label) + x.bandwidth() / 2 - 20; })

        .attr("y", h)

        .transition()

        .ease(d3.easeLinear)

        .duration(2000)

        .attr("y", function(d) { return y(d.percentage.slice(0, -1)) - 10; })       // use slice to remove percentage sign from the end of number

        .attr("dy", ".35em")

        .attr("fill", function(d) { return d.color; });

Now I want to apply text transition. Like instead of just printing say 90%(d.percentage). I want that it starts from 0 and goes to d.percentage gradually. How can I apply text transition in this case. I tried the following but it didn't work

svg.selectAll(".g.rect").append("text")

.text(function(d) { return d.percentage; })

.attr("x", function(d) { return x(d.label) + x.bandwidth() / 2 - 20; })

.attr("y", h)

.transition()

.ease(d3.easeLinear)

.duration(2000)

.tween("text", function(d) {

        var i = d3.interpolate(0, d.percentage.slice(0, -1));

        return function(t) {

            d3.select(this).text(i(t));

        };

})

.attr("y", function(d) { return y(d.percentage.slice(0, -1)) - 10; })       // use slice to remove percentage sign from the end of number

.attr("dy", ".35em")

.attr("fill", function(d) { return d.color; });

Your problem is that you return function(t) { ... } and try to access this of parent function inside. The solution is to return arrow function, which does not shadow this value:

return t => d3.select(this).text(i(t));

(by the way, you may also want to round percentage before printing)

-------------Edit --------------

Here is the working code

var numberFormat = d3.format("d");



svg.selectAll(".g.rect").append("text")

.attr("x", function(d) { return x(d.label) + x.bandwidth() / 2 - 20; })

.attr("y", h)

.transition()

.ease(d3.easeLinear)

.duration(2000)

.tween("text", function(d) {

        var element = d3.select(this);

        var i = d3.interpolate(0, d.percentage.slice(0, -1));

        return function(t) {

            var percent = numberFormat(i(t));

            element.text(percent + "%");

        };

        //return t => element.text(format(i(t)));

})

.attr("y", function(d) { return y(d.percentage.slice(0, -1)) - 10; })       // use slice to remove percentage sign from the end of number

.attr("dy", ".35em")

.attr("fill", function(d) { return d.color; });

Thanks :)

The problem is the this value.

Save it in the closure (that).

Use a number interpolator so you can round the result to a number of decimals.

var ptag = d3.select('body').append('p');



ptag.transition()

  .ease(d3.easeLinear)

  .duration(2000)

  .tween("text", function(d) {

    var that = this;

    var i = d3.interpolate(0, 90);  // Number(d.percentage.slice(0, -1))

    return function(t) {

        d3.select(that).text(i(t).toFixed(2));

    };

  })

<script src="https://d3js.org/d3.v5.min.js"></script>