D3 - Change the text label when updating data

Question

Using d3, I created a histogram that displays the text value of each line. I switch between two different datasets through the click event on the button. Datasets are successfully resized in mousedown, i.e. the histograms are resized, as one would expect, but I cannot change the text labels on the columns. My redrawText function does nothing, and calling the drawText function again simply redraws the data on top of the previous label (as you would expect). I am looking for a way to remove an old label and redraw a label reflecting the new data inside my removeText function.

Here is my drawText function, which is originally created to create a label. 'datachoose' is the name of the variable that is selected to display the correct 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 dataset and redraw the chart:

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

Answer 1

Without a complete example, it’s hard to understand what you are doing, but it seems that if the text label is a property of the data, you may not have received the label field.

Here is a simple example of what I think you describe 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: Another possibility is that the transition to the shortcut did not work, because you need to tell d3 how to make the transition for the text (see the updated redrawText).