Aktualisieren von D3-Achsenbeschriftungen

Question

Ich habe drei Optionsfelder, die den Wert auf der X-Achse für mein d3-Liniendiagramm ändern. Es ist mir gelungen, die Skalen zu ändern, jedoch nicht die X-Achsenbeschriftung. Überall wo ich hinschaue, sehe ich nur Infos für die Tickbezeichnungen, nicht die Achsenbezeichnungen (im Gif "Minute").

Ich habe erfolgreich in der Lage gewesen, zu aktualisieren und somit Neuskalierung die Achsen wie mit dem folgenden Code, aber kann nicht herausfinden, wie das Etikett zu ändern.

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 the scale for the graphs dynamic 
    yScale.domain(yDomain); 

    xScale.domain(xDomain); 

    vis = d3.select('#visualisation').transition(); 
    //add axes with proper scale, orientation, and 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 to hardcode with 'sugar' to no avail, would eventually like to use xAxisLabel declared above. 
    vis.select('.text') 
     .duration(750) 
     .text('sugar'); 
} 

habe ich den Text, wenn ich zum ersten Mal die Grafik mit dem folgenden Code aus:

dieses

vis.append('text') 
     .attr('text-anchor', 'middle') // this makes it easy to centre the text as the transform is applied to the anchor 
     .attr('transform', 'translate('+ (WIDTH/2) +','+(HEIGHT+(MARGINS.bottom/3))+')') // centre below axis 
     .text(xAxisLabel); 

Answer 1

Versuchen: Erstens, eine Variable für Ihren Text erstellen.

var textLabel = vis.append("text") 
    .attr('text-anchor', 'middle') // this makes it easy to centre the text as the transform is applied to the anchor 
    .attr('transform', 'translate('+ (WIDTH/2) +','+(HEIGHT+(MARGINS.bottom/3))+')') // centre below axis 
    .text(xAxisLabel); 

Und dann, nach der Aktualisierung:

textLabel.duration(750).text(xAxisLabel) 

Alternativ kann, wenn die oben genannte Lösung nicht funktionieren (weil vis eine transition() Auswahl), können Sie einfach versuchen diese, da Sie die Auswahl ein DOM-Element:

vis.select('.text')[0][0] 
    .duration(750) 
    .textContent = (xAxisLabel); 

Wenn Sie noch eine bekommen „ist keine Funktion“ Fehler, vis für die ursprüngliche Variable ändern, die Sie verwendet Anfügen der Svg.

Edit: Vergessen Sie nicht, die Klasse "Text" auf den Text zu setzen.

Answer 2

Wie von Gerardo in den Kommentaren vorgeschlagen, war das fehlende Link die Bezeichnung "Text" bei der Erstellung zu geben.

var xAxisLabel = vis.append('text').attr("class", "text")//the rest of the code 

war ich dann in der Lage es in meiner Update-Funktion zu ändern, wie so:

vis.select('.text') 
    .duration(750) 
    .text(xAxisLabel); 

Danke Gerardo!