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.]
... когда я перерисовываю диаграмму (с изменениями данных или настроек или без них), эти метки меняются следующим образом.
![enter image description here]()
![enter image description here]()
Обратите внимание, что 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");