javascript - d3 - Change text label when data updates -

Using D3, I've created a bar that displays the text value of each bar on it. I'm toggling between two different data sets on one button through a click event. The data set changes successfully on the museum, i.e. the bar graph should be changed to size, but I am unable to change the text labels on the bars. My RedText function does nothing, and my Duty is calling the text function again, again only the data is highlighted at the top of the previous label (as it would be one). I am looking for a way to remove the old label and replicate the label showing the new data within your deleted text function.

Here is my Draw Text function, which is initially called 'Dataschoo' variable to create a label that is selected to graph the proper data set.

  function draw text (dataschow) {new_svg.selectAll ("text.dataChoose"). Data (select data) ent ("text"). Text (function (d) {return d;}) / * some transax code * / .attr ("fill", "white") .attr ("style", "font size: 12; font-family: garamand, without -serif "); }  

Here is the relevant part of my Mussudown event handler, which is used to update the data set and underline the graph:

  .on ("Musundown", function {if (Select data == data) {dataChoose = data2;} and {DataContent = Data;} redraw (Data Exclamation); Redra Text (Data Exclamation);});  

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;}) / * Transform code * / .attr ("fill", "white") .attr ("style", "font - Size: 16; font-family: garrond, non-serif "); }  

Without a complete example, it is difficult to see what you are doing But it seems that if the text label is a property of that data you do not find the label field correctly.

Here is a simple example of what you are describing as your desired behavior: (LINK):

var svg = d3.select ('Svg'); Var data = [{"tag": "ABC", "val": 123}] data 2 = [{"tag": "iJK", "val": 321}] with var data = data; Var myBarGraph = svg.selectAll ('rect'). Data (Data Excluded) .end () .append ('rect') .attr ({x: 160, y: 135, height: 20, width: function (d) {return d.val;}, fill: 'black' }); Var updateBarGraph = function () {myBarGraph .data (datachecho) .transition () .duration (1000) .attr ('width', function (d) {return d.val;})} var myText = svg.append (' Text '). Data (Dataclos) .attr (' x ', 129) .attr (' y ', 150) .attr (' fill ',' # 000 '). Classified (select 'data', true) .text function (d) {return d.tag}) svg.on ("click", function () {if (dataChoose == data) {dataChoose = data2;} And {dataChoose = data;} redrawText (); updateBarGraph ();}); Function redtest () {myText. Data (data selection) Transition () .dishition (1000). Style ("opacity", 0) .transition (). Duration (500) Style ("opacity", 1) .text function (d) {return d.tag})}

Edit: The second possibility is that your label transition was not working because You need to tell D3 how to transition for text (updated radra text).