Подтвердить что ты не робот

Изменение тиков по оси x

Я пытаюсь выяснить d3.js. Определяя ось, как я могу получить пользовательскую маркировку по оси x. Например, по умолчанию я получаю следующее:

|------|------|------|------|------|------|
20    30     40     50     60     70     80

В то время как я хочу что-то вроде:

|------|------|------|------|------|------| ....
20    26      32    38     44     50     56

В настоящее время я изучаю его и работаю над кодом (слегка измененным) из представленных официальных примеров:

var xAxis = d3.svg.axis().scale(x).tickPadding(7).orient("bottom");
var yAxis = d3.svg.axis().scale(y).tickPadding(5).orient("left");

Ответ 1

По умолчанию тики для количественных масштабов кратные 2, 5 и 10. Кажется, вам нужны кратные 6; хотя это и необычно, это может иметь смысл в зависимости от характера базовых данных. Итак, пока вы можете использовать axis.ticks, чтобы увеличить или уменьшить количество тиков, он всегда будет возвращать кратные 2, 5 и 10 - не 6.

Если вы хотите умножить 6, вы можете использовать axis.tickValues , чтобы явно указать значения тика. Обычно это используется в сочетании с d3.range. Например:

xAxis.tickValues(d3.range(20, 80, 4));

Если вы хотите динамически вычислять значения, используйте домен x-scale для получения самого низкого и самого высокого значения. Также имейте в виду, что верхняя граница диапазона является исключительной, поэтому в приведенном выше примере наибольшее значение тика составляет 76. Вы можете сделать верхнюю границу включительно, сделав стоп-значение диапазона немного большим (например, 81).