x 轴标签未完全显示

Question

我知道这可能是有史以来最糟糕的代码，但请耐心等待，我真的还没有掌握 D3 的窍门（还）。

所以我有下图https://jsfiddle.net/El4a/sfu07q67/6/

包含大量骇人听闻的代码。我需要的是显示最近12个月的数据，最后显示的月份是当月。所以在这种情况下（现在是四月），x 轴的范围是从五月 (2015) 到四月 (2016)。像这样：

图表上的数据显示正确，到目前为止一切顺利。

然而，这些标签真的很痛苦。我已经把它们弄得差不多好了，但由于某些奇怪的原因，最旧的（五月）和当前的（四月）月份没有显示出来。

我正在按正确的顺序对月份的名称进行排序：

    var months = ["Jan", "Feb", "Maa", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"];

var x = [];
for (var i = 0; i < timePeriod.length; i++) {
  if (timePeriod[i] === 0) {
    x.push(months[timePeriod[i]]);
  }
  else {
    x.push(months[timePeriod[i]-1]);
  }
}; 

//result : ["Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec", "Jan", "Feb", "Maa", "Apr"]

然后尝试将它们粘贴到图表上：

    var count = 0;  
chart.xAxis
.axisLabel('Month')  
.tickValues([1,2,3,4,5,6,7,8,9,10,11,12])
.tickFormat(function(d) {  
  var label = x[count];  
  count++;
  return label;   
});

谁能帮帮我？

Answer 1

问题出在 xAxis 的 tickFormat 实现上。出于某种原因，您的 count 变量从 0 运行到 13，当您最后两次访问 x 时，即 12 和 13，return 值未定义。

将您的 tickFormat 函数更改为以下内容，它应该可以工作：

.tickFormat(function(d) {  
  return x[d-1];       
 });

注意 d-1。

x 轴标签未完全显示

x-axis labels not displaying fully

d3.js

nvd3.js

axis-labels