D3.js - начальный и конечный тик

Я создаю граф области в d3.js.

Для моей оси y я хочу использовать линейный масштаб, который простирается от минимального значения до максимального значения данных, представленных на графике.

Использование

y = d3.scale.linear().range([height, 0]),
yAxis = d3.svg.axis().scale(y).orient("left")

d3 показывает тики только для кратных 10000.

Я также хотел бы видеть тики для начального и конечного значений. Это возможно? Как?

Ответ 1

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

y = d3.scale.linear().range([height, 0]).domain(...).nice();

Альтернативой было бы указать галочки явно, что в целом гораздо больнее.

Ответ 2

Подход nice() обычно предпочтительнее, но если вы хотите иметь ярлыки ярлыков в максимальных и минимальных значениях ваших данных, вы можете заставить ось включить их вместе с любыми значениями по умолчанию, которые будут установлены по умолчанию по шкале:

axis.tickValues( scale.ticks( 5 ).concat( scale.domain() ) );

scale.ticks(count) возвращает массив примерно того большого количества значений тика из домена шкалы, округленный до хороших четных чисел. scale.domain() возвращает массив доменов [min,max], который вы устанавливаете на основе данных. array.concat(array) объединяет один массив на конце другого, а axis.tickValues(array) указывает оси, чтобы выделить тики в этих значениях.

Пример в реальном времени: http://fiddle.jshell.net/zUj3E/4/