Этикетки с осью x не отображаются полностью

Question

Я знаю, что это, вероятно, самый худший код, когда-либо написанный, но, пожалуйста, несите меня, я действительно не понимаю, как D3 (пока).

Поэтому у меня есть следующий граф https://jsfiddle.net/El4a/sfu07q67/6/

, содержащий много Hacky кода. Мне нужно отображать последние 12 месяцев данных, причем последний отображаемый месяц является текущим месяцем. Итак, в этом случае (это апрель) ось х варьируется от may (2015) до апреля (2016). Как так:

Данные на графике отображает корректно, до сих пор так GOED.

Этикетки, однако, являются настоящей болью. У меня есть они почти хорошие, но по какой-то причине, самый старый (может) и текущий (апрель) месяц не отображаются.

Я своего рода сортировкой названия месяцев в правильном порядке:

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

Проблема с вашей реализацией tickFormat для xAxis. По какой-то причине ваша переменная count работает от 0 до 13, и когда вы получаете доступ к x последние два раза, 12 и 13, возвращаемое значение не определено.

Изменение функции tickFormat к следующему, и он должен работать:

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

Обратите внимание на d-1.