更新D3轴标签

我有三个单选按钮，它们改变了我的d3线图的x轴上的值。我已经成功地改变了比例尺，但不是X轴标签。到处看，我只看到滴答标签的信息，而不是轴标签（在gif“分钟”中）。更新D3轴标签

我已经成功地得以更新，从而重新缩放轴与下面的代码，但无法弄清楚如何更改标签。

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

来源

2016-04-19 Dane Jordan

创建文本的'var'是什么？你只需要做'someVariable.text（“你的文本”）'。现在，您正在选择一个DOM元素。 –

嘿赫拉尔多，我会相应地更新我的问题。 –

试试这个：首先，为您的文字的变量。

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

然后，之后更新：

textLabel.duration(750).text(xAxisLabel)

另外，如果上述方案不能正常工作（因为vis是transition()选择），你可以简单地尝试这一个，因为你选择DOM元素：

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

如果仍然得到一个“不是一个函数”的错误，改变vis为您所使用的原始变量追加svg。

编辑：不要忘记将类“文本”设置为文本。

来源

2016-04-19 03:12:39

不幸的是，既没有工作：/这里是jsfiddle链接！无法让代码显示出来，但它可以在浏览器窗口中工作。 https://jsfiddle.net/dane456/hf6prhah/ –

文本是否有类“文本”？ “text”是svg文本元素，但“.text”是一个类。 –

尝试设置一个类：'var xAxisLabel = vis.append（'text'）。attr（“class”，“text）//其余代码' –

正如Gerardo在评论中所建议的那样，在创建时为该标签提供类“文本”是缺失的链接。

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

当时我能够在我的更新功能来改变它像这样：

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

谢谢赫拉尔多！

来源

2016-04-20 02:17:38

回答

相关问题