Question

97

d3 - Change text label when data updates

rated 0 times [ 100] [ 3] / answers: 1 / hits: 18883 / 10 Years ago, tue, february 18, 2014, 12:00:00

Using d3, I created a bar graph that displays the text value of each bar on it. I am toggling between two different data sets through a click event on a button. The data sets change successfully on mousedown, i.e. the bar graphs change in size as they should, but I am unable to change the text labels on the bars. My redrawText function does not do anything, and calling my drawText function again just redraws the data on top of the previous label (as one would expect). I am looking for a way to remove the old label and redraw the label reflecting the new data inside my removeText function.

Here is my drawText function, which is called initially to create the label. 'datachoose' is the name of the variable that is selected to graph the proper data set.

function drawText(dataChoose) {

     new_svg.selectAll(text.dataChoose)

        .data(dataChoose)

        .enter().append(text)

        .text(function(d) {

                return d;

                })

    /* removed some transform code */

     .attr(fill, white)

     .attr(style, font-size: 12; font-family: Garamond, sans-serif);

}

Here are the relevant parts of my mousedown event handler, which is used to update the data set and redraw the graph:

.on(mousedown, function() {



        if (dataChoose == data) {

            dataChoose = data2;

        }



        else {

        dataChoose = data;

        }



        redraw(dataChoose);

        redrawText(dataChoose);

    });

and here is my redrawText() function

function redrawText(dataChoose) {



    var new_text = new_svg.selectAll(text.dataChoose)

        .data(dataChoose);



    new_text.transition()

     .duration(1000)

     .text(function(d) {

        return d;

        })



/* removed transform code */



    .attr(fill, white)

    .attr(style, font-size: 16; font-family: Garamond, sans-serif);

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

giovanny

Add To Favorites

Follow

Total Points: 314

Total Questions: 101

Total Answers: 90

Location: Tajikistan

Member since Thu, Apr 14, 2022

2 Years ago

answered 10 Years ago cadendericki · Accepted Answer

Without a full example it's hard to see exactly what you're doing but it looks like if the text label is a property of the data you might not be getting the label field correctly.

Here's a simple example of what I think you're describing as your desired behavior: (LINK): http://tributary.io/inlet/9064381

var svg = d3.select('svg');



var data = [{tag:abc,val:123}]

    data2 = [{tag:ijk,val:321}]



var dataChoose = data;



var myBarGraph = svg.selectAll('rect')

    .data(dataChoose)

    .enter()

    .append('rect')

    .attr({

      x: 160,

      y: 135,

      height: 20,

      width: function(d) { return d.val; },

      fill: 'black'

    });



var updateBarGraph = function() {

    myBarGraph

    .data(dataChoose)

    .transition()

    .duration(1000)

    .attr('width', function(d) { return d.val; })

}



var myText = svg.append('text')

    .data(dataChoose)

    .attr('x', 129)

    .attr('y', 150)

    .attr('fill', '#000')

    .classed('dataChoose', true)

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



svg.on(click, function() {

        if (dataChoose == data) {

            dataChoose = data2;

        } else {

        dataChoose = data;

        }

        redrawText();

        updateBarGraph();

    });



function redrawText() {

    myText

    .data(dataChoose)

    .transition()

    .duration(1000)

    .style(opacity, 0)

    .transition().duration(500)

    .style(opacity, 1)

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

}

EDIT: The other possibility is that your label transition wasn't working because you need to tell d3 how to do the transition for text (see the updated redrawText).