d3 - высмеять маркировку оси x

Question

У меня есть диаграмма, где x Axis представляет календарные недели. Из-за изменения года моя диаграмма теперь не правильно отсортирована. Так calendarweek 1 с 2015 года в настоящее время до calendarweeks от 2014.

Я знаю, что я должен изменить что-то в моих данных. Я думал добавить год до календарной недели, например, 151, 152, 1450, 1451, 1452 и так далее.

Я пробовал это, и он работает. Но это не совсем понятно для клиента. Поэтому я подумал, что могу просто разделить номер календаря на 1, 2, 50, 51 и 52 и отправить его переменной xAxis.

var xAxis = d3.svg.axis() 
.scale(x) 
.tickValues(sliceKeys) 
.orient("bottom"); 

Но тогда бывает, что тики не совпадают с полосками и не появляются. Но теперь решетки отсортированы правильно. Кто-нибудь знает, как это можно сделать?

Answer 1

В соответствии с рекомендацией Ларса в вышеупомянутых комментариях, вы можете использовать .tickFormat() для преобразования значения с годом в значение без года.

Here's a modified fiddle. Я отключил нарезку ключей (но делал это ленивым путем, просто комментируя разрезающую часть, не удаляя весь цикл, даже если он больше не нужен).

Тогда единственное, что требуется, это .tickFormat() бит, который вырезает год из полной стоимости:

var xAxis = d3.svg.axis() 
    .scale(x) 
    .tickValues(sliceKeys) 
    .tickFormat(function(yearAndWeek) { 
    return String(yearAndWeek).slice(2); 
    }) 
    .orient("bottom");