Ось D3

Axis улучшает читаемость, предоставляя ориентиры. Как использовать модуль осей D3 для создания осей графиков. В этом руководстве рассматриваются направление осей, преобразования, количество делений, пользовательские значения делений, форматирование делений и размер делений. ! [image-20220818101207159](. /image/image-20220818101207159. png)

Ось

Для создания D3 Axis требуется два элемента:

• SVG элемент, содержащий Axis (обычно это элемент g)
• D3 Scale

Примечание: domain обычно переводится как "домен", а range как "диапазон". Чтобы избежать двусмысленности, в тексте ниже используются термины domain и range. Функции D3 Scale имеют domain и range (см. Пропорции раздел). domain указывает на диапазон входных значений (например, [0, 100]), а range определяет диапазон выходных значений пропорции (например, [0, 1000]). При определении осей с помощью D3 Scale functions, domain определяет минимальное и максимальное значения делений, а range определяет длину оси. Чтобы создать ось:

• Используйте функции d3.axisBottom, d3.axisTop, d3.axisLeft, d3.axisRight для создания axis;
• Выберите контейнерный элемент, используя .call для передачи axis. Вот базовый пример:

<svg width="600" height="100">
  <g transform="translate(20, 50)"></g>
</svg>
let scale = d3.scaleLinear().domain([0, 100]).range([0, 500]);
let axis = d3.axisTop(scale);
// let axis = d3.axisBottom(scale);
d3.select('svg g')
  .call(axis);

! [image-20220818102340554](. /image/image-20220818102340554. png) ! [image-20220818102423336](. /image/image-20220818102423336. png) > https://codepen.io/wantnocode/pen/dymwRRM .call будет рассмотрен в Выборе разделе.

Направление оси

d3.axisBottom, d3.axisTop, d3.axisLeft и d3.axisRight используются для создания осей, подходящих для нижней, верхней, левой и правой сторон графика:

<svg width="500" height="500">
  <g id="left" transform="translate(30, 40)"></g>
  <g id="right" transform="translate(450, 40)"></g>
  <g id="top" transform="translate(40, 30)"></g>
  <g id="bottom" transform="translate(40, 450)"></g>
</svg>
let scale = d3.scaleLinear().domain([0, 100]).range([0, 400]);
let axisLeft = d3.axisLeft(scale);
let axisRight = d3.axisRight(scale);
let axisTop = d3.axisTop(scale);
let axisBottom = d3.axisBottom(scale);
d3.select('#left').call(axisLeft);
d3.select('#right').call(axisRight);
d3.select('#top').call(axisTop);
d3.select('#bottom').call(axisBottom);

! image-20220818103006612

https://codepen.io/wantnocode/pen/gOeZRGx

Тип scale

Можно передать любую функцию scale, которая имеет числовый выход. Включая scaleLinear, scaleSqrt, scaleTime и scaleBand. scalePoint и т. д. Ниже приведены примеры использования каждого типа масштаба: ! image-20220818104802934

https://codepen.io/wantnocode/pen/wvmRepy

Переходы

Если область масштаба изменяется, можно обновить ось, снова вызвав .call(axis):

d3.select('svg g')
  .call(axis);

Вы также можете добавить вызов .transition, чтобы сделать ось анимированной:

d3.select('svg g')
  .transition()
  .call(axis);

! image-20220818112133102

https://codepen.io/wantnocode/pen/wvmRqwY

Настройка оси

Вы можете настроить ось следующим образом: - Указание количества делений или конкретных значений делений

• Указание формата меток делений (например, добавление знака процента)
• Указание размера делений

ticks

Вы можете использовать метод .ticks, чтобы указать количество делений на оси:

let scale = d3.scaleLinear().domain([0, 100]).range([0, 500]);
let axis = d3.axisBottom(scale);
axis.ticks(10);
//Is equivalent to:
//axis.tickArguments([10]);
d3.select('svg g')
.call(axis);

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

https://codepen.io/wantnocode/pen/vYRvJOp

tickValues

Вы можете указать значения делений на оси, передав массив значений делений методу .tickValues:

let scale = d3.scaleLinear().domain([0, 30]).range([0, 300]);
let axis = d3.axisBottom(scale);
axis.tickValues([1, 2, 3, 5, 8, 13, 21]);
d3.select('svg g')
.call(axis);

https://codepen.io/wantnocode/pen/YzadxWY

tickFormat

Вы можете форматировать метки делений двумя способами. Первый способ - использовать метод .ticks и передать фиксированный формат строки (см. d3-format) как второй параметр:

let scale = d3.scaleLinear().domain([0, 100]).range([0, 500]);
let axis = d3.axisBottom(scale);
axis.ticks(4, "$.2f");
d3.select('svg g')
.call(axis);

> https://codepen.io/wantnocode/pen/dymwVva
```  **Второй метод заключается в передаче функции форматирования в метод `.tickFormat`. Эта функция принимает значение и возвращает отформатированное значение**.
В этом примере мы добавляем символ процента (%) к каждому значению делений:

let scale = d3.scaleLinear().domain([0, 100]).range([0, 500]); let axis = d3.axisBottom(scale); axis.ticks(4) .tickFormat(function(d) { return d + "%"; }); d3.select('svg g') .call(axis);

   ![](./image/image-20220818134558820.png)
   > https://codepen.io/wantnocode/pen/wvmRrrG
   ### Размер делений
   Размер делений можно задать с помощью метода `.tickSize`. Также можно задать расстояние между делениями и их метками с помощью метода `.tickPadding`:

let scale = d3.scaleLinear().domain([0, 100]).range([0, 500]); let axis = d3.axisBottom(scale) .tickPadding(10) .tickSize(10); d3.select('svg g') .call(axis);

   ![](./image/image-20220818134826956.png)
   > https://codepen.io/wantnocode/pen/ZExVXXv