D3軸ラベルの更新

Question

d3線グラフのx軸の値を変更する3つのラジオボタンがあります。私はスケールを変更することに成功しましたが、x軸ラベルは変更できませんでした。どこでも私はちょうど目盛りラベルのための情報を見、軸ラベルではない（gif "Minute"の）。私が正常に更新され、したがって、以下のコードのように再スケール軸することができました

、しかし、ラベルを変更する方法を見つけ出すことはできません。

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'); 
} 

私が最初に次のコードを使用してグラフを作ったとき、私はテキストを設定：

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

はこれを試してみてください：まず、あなたのテキストのための変数を作成します。

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); 

そして、更新した後：（visがtransition()選択であるため）上記の解決策が動作しない場合は、選択されているので

textLabel.duration(750).text(xAxisLabel) 

を別の方法として、あなたは単に、これを試すことができますDOM要素：

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

あなたはまだ「関数ではありません」というエラーが出た場合、あなたが使用された元の変数の変更vis svgを追加します。

編集：テキストにクラス「テキスト」を設定することを忘れないでください。

Answer 2

コメントの中でGerardoが提案したように、作成時にラベル 'text'をラベルに付けることは、リンクが不足していました。

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

私はその後ように、私の更新機能でそれを変更することができました：

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

はあなたのヘラルドをありがとう！