d3-axis

Компонент оси отображает удобочитаемые метки отсчёта для шкал. Это упрощает одну из более утомительных задач при визуализации данных.

Установка

Если вы используете NPM, npm install d3-axis. В противном случае, загрузите последнюю версию. Вы также можете загрузить напрямую с d3js.org, либо как самостоятельную библиотеку, либо как часть D3 4.0. (Для использования вам также понадобится d3-scale и d3-selection, но это мягкие зависимости.) Поддерживаются среды AMD, CommonJS и vanilla. В vanilla, экспортируется глобальная переменная d3:

<script src="https://d3js.org/d3-axis.v1.min.js"></script>
<script>

var axis = d3.axisLeft(scale);

</script>

Попробуйте d3-axis в вашем браузере.

Справочник API

Независимо от ориентации, оси всегда отображаются в начале координат. Чтобы изменить положение оси относительно графика, укажите атрибут transform для содержащего элемента. Например:

d3.select("body").append("svg")
    .attr("width", 1440)
    .attr("height", 30)
  .append("g")
    .attr("transform", "translate(0,30)")
    .call(axis);

Элементы, созданные осью, считаются частью её публичного API. Вы можете применять внешние таблицы стилей или изменять сгенерированные элементы оси, чтобы настроить внешний вид оси.

Ось состоит из элемента path класса “domain”, представляющего пределы области определения шкалы, за которым следуют преобразованные элементы g класса “tick”, представляющие каждый из отметки шкалы. Каждая метка содержит элемент line для рисования линии отметки и элемент text для метки отметки. Например, вот типичная ось с направлением вниз:

<g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
  <path class="domain" stroke="currentColor" d="M0.5,6V0.5H880.5V6"></path>
  <g class="tick" opacity="1" transform="translate(0.5,0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71em">0.0</text>
  </g>
  <g class="tick" opacity="1" transform="translate(176.5,0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71em">0.2</text>
  </g>
  <g class="tick" opacity="1" transform="translate(352.5,0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71em">0.4</text>
  </g>
  <g class="tick" opacity="1" transform="translate(528.5,0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71em">0.6</text>
  </g>
  <g class="tick" opacity="1" transform="translate(704.5,0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71em">0.8</text>
  </g>
  <g class="tick" opacity="1" transform="translate(880.5,0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71em">1.0</text>
  </g>
</g>

Ориентация оси фиксирована; чтобы изменить ориентацию, удалите старую ось и создайте новую.

d3.axisTop(scale) Исходный код

Создаёт новый генератор оси с направлением вверх для заданной шкалы, с пустыми аргументами деления, размером деления 6 и отступом 3. В этом направлении деления рисуются над горизонтальным элементом path области определения.

d3.axisRight(scale) Исходный код

Создаёт новый генератор оси с направлением вправо для заданной шкалы, с пустыми аргументами деления, размером деления 6 и отступом 3. В этом направлении деления рисуются справа от вертикального элемента path области определения.

d3.axisBottom(scale) Исходный код

Создаёт новый генератор оси с направлением вниз для заданной шкалы, с пустыми аргументами деления, размером деления 6 и отступом 3. В этом направлении деления рисуются под горизонтальным элементом path области определения.

d3.axisLeft(scale) Исходный код

Создаёт новый генератор оси с направлением влево для заданной шкалы, с пустыми аргументами деления, размером деления 6 и отступом 3. В этом направлении деления рисуются слева от вертикального элемента path области определения.

axis(context) Исходный код

Отображает ось в заданном контексте, который может быть либо выборкой SVG контейнеров (либо SVG, либо G элементы), либо соответствующим переходом.

axis.scale([scale]) Исходный код

Если scale указан, устанавливает шкалу и возвращает ось. Если scale не указан, возвращает текущую шкалу.

axis.ticks(arguments…) Исходный код
axis.ticks([count[, specifier]])
axis.ticks([interval[, specifier]])

Устанавливает аргументы, которые будут переданы в scale.ticks и scale.tickFormat при отображении оси, и возвращает генератор оси. Значение аргументов зависит от типа шкалы оси: чаще всего, аргументы представляют собой предлагаемое количество делений (или интервал времени для временных шкал) и необязательный формат спецификатора для настройки форматирования значений делений.

Этот метод не имеет эффекта, если шкала не реализует scale.ticks, как в band и point масштабах. Чтобы установить значения делений явно, используйте axis.tickValues. Чтобы установить форматирование делений явно, используйте axis.tickFormat.

Например, чтобы сгенерировать двадцать делений с форматированием с использованием префиксов СИ для линейной шкалы, укажите:

axis.ticks(20, "s");

Чтобы сгенерировать деления каждые пятнадцать минут с временной шкалой, укажите:

axis.ticks(d3.timeMinute.every(15));

Этот метод также является удобной функцией для axis.tickArguments. Например, это:

axis.ticks(10);

Эквивалентно:

axis.tickArguments([10]);

axis.tickArguments([arguments]) Исходный код

Если arguments указан, устанавливает аргументы, которые будут переданы в scale.ticks и scale.tickFormat при отображении оси, и возвращает генератор оси. Значение аргументов зависит от типа шкалы оси: чаще всего, аргументы представляют собой предлагаемое количество делений (или интервал времени для временных шкал) и необязательный формат спецификатора для настройки форматирования значений делений.

Если arguments указан, этот метод не имеет эффекта, если шкала не реализует scale.ticks, как в band и point масштабах. Чтобы установить значения делений явно, используйте axis.tickValues. Чтобы установить форматирование делений явно, используйте axis.tickFormat.

Если arguments не указан, возвращает текущие аргументы делений, по умолчанию пустой массив.

Например, чтобы сгенерировать двадцать делений с форматированием с использованием префиксов СИ для линейной шкалы, укажите:

axis.tickArguments([20, "s"]);

Чтобы сгенерировать деления каждые пятнадцать минут с временной шкалой, укажите:

axis.tickArguments([d3.timeMinute.every(15)]);

См. также axis.ticks.

axis.tickValues([values]) Исходный код

Если массив values указан, указанные значения используются для делений, а не с помощью автоматического генератора делений шкалы. Если values равно null, очищает все ранее установленные явные значения делений и возвращается к генератору делений шкалы. Если values не указан, возвращает текущие значения делений, по умолчанию null. Например, чтобы сгенерировать деления в определённых значениях:

var xAxis = d3.axisBottom(x)
    .tickValues([1, 2, 3, 5, 8, 13, 21]);

Явные значения делений имеют приоритет над аргументами делений, установленными axis.tickArguments. Однако любые аргументы делений по-прежнему будут переданы в функцию форматирования делений шкалы, если формат делений также не установлен.

axis.tickFormat([format]) Исходный код

Если format указан, устанавливает функцию форматирования делений и возвращает ось. Если format не указан, возвращает текущую функцию форматирования, по умолчанию null. Значение null указывает, что должна использоваться функция форматирования по умолчанию шкалы, которая генерируется с помощью вызова scale.tickFormat. В этом случае аргументы, указанные в axis.tickArguments, также передаются в scale.tickFormat.

См. d3-format и d3-time-format для создания форматировщиков. Например, чтобы отображать целые числа с группировкой разрядов тысяч:

axis.tickFormat(d3.format(",.0f"));

Чаще всего, спецификатор формата передаётся в axis.ticks:

axis.ticks(10, ",f");

Это имеет преимущество, позволяющее автоматически устанавливать точность форматирования на основе интервала делений.

axis.tickSize([size]) Исходный код

Если size указан, устанавливает размер внутреннего и внешнего деления на указанное значение и возвращает ось. Если size не указан, возвращает текущий внутренний размер деления, по умолчанию 6.

axis.tickSizeInner([size]) Исходный код

Если size указан, устанавливает внутренний размер деления на указанное значение и возвращает ось. Если size не указан, возвращает текущий внутренний размер деления, по умолчанию 6. Внутренний размер деления управляет длиной линий делений, смещённых от исходного положения оси.

axis.tickSizeOuter([size]) Исходный код

Если размер указан, устанавливает внешний размер отметки до указанного значения и возвращает ось. Если размер не указан, возвращает текущий внешний размер отметки, который по умолчанию равен 6. Величина внешнего размера отметки определяет длину квадратных концов пути области, смещенных от исходного положения оси. Таким образом, «внешние отметки» на самом деле не являются метками, а частью пути области, и их положение определяется диапазоном области связанной шкалы. Следовательно, внешние отметки могут перекрываться с первой или последней внутренней отметкой. Значение внешнего размера отметки 0 подавляет квадратные концы пути области, вместо этого создавая прямую линию.

axis.tickPadding([padding]) Исходный код

Если отступ указан, устанавливает отступ до указанного значения в пикселях и возвращает ось. Если отступ не указан, возвращает текущий отступ, который по умолчанию составляет 3 пикселя.