javascript - Updating D3 Axis Labels -

i have 3 radio buttons change value on x-axis d3 line graph. have been able change scales, not x-axis label. everywhere see info tick labels, not axes label (in gif "minute").

i have been able update , re-scale axes code below, cannot figure out how change label.

    function updategraph(graphdata, timescale){      ydomain = d3.extent(graphdata, function(d){return number(d.amt)});      switch(timescale) {         case 'min':             xdomain = d3.extent(graphdata, function(d){return number(d.min)});             break;         case 'hour':             xdomain = d3.extent(graphdata, function(d){return number(d.hour)});             break;         case 'day':             xdomain = d3.extent(graphdata, function(d){return number(d.day)});             break;         default: break;      }      //make scale graphs dynamic     yscale.domain(ydomain);      xscale.domain(xdomain);      vis = d3.select('#visualisation').transition();     //add axes proper scale, orientation, , position       var line = d3.svg.line()     .x(function(d){          switch(timescale) {             case 'min':                 return xscale(d.min);                 break;             case 'hour':                 return xscale(d.hour);                 break;             case 'day':                 return xscale(d.day);                 break;             default: break;          }      })     .y(function(d){         return yscale(d.amt);     })     .interpolate('basis');      var xaxislabel = function(){         switch(timescale) {             case 'min':                 return 'minute';                 break;             case 'hour':                 return 'hours';                 break;             case 'day':                 return 'day';                 break;             default: break;          }     }      vis.select('.line')         .duration(750)         .attr('d', line(graphdata))     vis.select('.xaxis')         .duration(750)         .call(xaxis);     vis.select('.yaxis')         .duration(750)         .call(yaxis);     //tried hardcode 'sugar' no avail, use xaxislabel declared above.     vis.select('.text')         .duration(750)         .text('sugar'); } 

i set text when first made graph following code:

 vis.append('text')         .attr('text-anchor', 'middle')  // makes easy centre text transform applied anchor         .attr('transform', 'translate('+ (width/2) +','+(height+(margins.bottom/3))+')')  // centre below axis         .text(xaxislabel); 

try this: first, create variable text.

var textlabel = vis.append("text")    .attr('text-anchor', 'middle')  // makes easy centre text transform applied anchor     .attr('transform', 'translate('+ (width/2) +','+(height+(margins.bottom/3))+')')  // centre below axis     .text(xaxislabel); 

and then, after updating:

textlabel.duration(750).text(xaxislabel) 

alternatively, if above solution don't work (because vis transition() selection), can try one, since selecting dom element:

vis.select('.text')[0][0]     .duration(750)     .textcontent = (xaxislabel); 

if still "is not function" error, change vis original variable used append svg.

edit: don't forget set class "text" text.