D3 - использование строк для тиков оси

Я хочу разбивать гистограмму, используя строки в качестве меток для тиков по оси x (например, год 1, год 2 и т.д. вместо 0,1,2 и т.д.).

Я начал с использования числовых значений для оси x (например, 0,1,2,3 и т.д.) следующим образом:

1) Я создаю свои диапазоны:

     x = d3.scale.ordinal()
        .domain(d3.range(svg.chartData[0].length)) //number of columns is a spreadsheet-like system
        .rangeRoundBands([0,width], .1); 


     y = d3.scale.linear()
        .domain(Math.min(d3.min(svg.chartData.extent),0), Math.max(d3.min(svg.chartData.extent),0)]) 
        .range([height, 0])
        .nice();

2) Сделайте оси:

     d3.svg.axis()
        .scale(x);

3) Перерисовать оси:

     svg.select(".axis.x_axis")
        .call(make_x_axis().orient("bottom").tickSubdivide(1).tickSize(6, 3, 0));

Это хорошо работает с метками числовой оси по умолчанию.

Если я попытаюсь использовать массив строк для x tickValues, как это....

     d3.svg.axis()
        .scale(x).tickValues(svg.pointsNames); //svg.pointsNames = ["Year 1", "year 2", etc.]

... когда я перерисовываю диаграмму (с изменениями данных или настроек или без них), эти метки меняются следующим образом.

Обратите внимание, что Col 1 заменяет Col 0 и наоборот.

Вы знаете, почему это происходит?

Ответ 1

Обновить

Просто выберите svg.pointsNames, прежде чем применять их как tickValues. Убедитесь, что вы сортируете их точно так же, как вы сортируете данные. Таким образом, между вашими метками и значениями меток всегда поддерживается однократное отображение.

Также, если можно, ознакомьтесь с функцией tickFormat` здесь. Мне кажется, это лучший вариант.

//Tick format example
chart,xAxis.tickFormat(function(d, i){
    return "Year" + d //"Year1 Year2, etc depending on the tick value - 0,1,2,3,4"
})

Ответ 2

Спасибо за это... Я использовал эту функцию с встроенным if-предложением для обработки другой серии по оси x с именами вместо чисел.

Массив фракций состоит из всех соответствующих имен, отсортированных по индексам серии, которые затем просто сопоставляются с соответствующим индексом в данных.

xAxis = d3.svg.axis().scale(xScale)
            .tickFormat(function(d) { 

                if(seriesX == 'seriesValue'){ 
                    return factions[d]}

                else{ 
                    return d}
            })    
         .orient("bottom");