RU Оси SVG

Вики ▸ Справка по API ▸ SVG ▸ Оси SVG
English | Русский

Компонент осей D3 автоматически отображает опорные линии для шкал. Это позволяет вам сфокусироваться на отображении данных, в то время, как компонент осей заботиться об утомительной задаче рисования осей и засечек.

Оси

Компонент осей спроектирован для работы с количественными, временн́ыми и порядковыми шкалами D3.

# d3.svg.axis()

Создаёт новую ось по умолчанию.

# axis(selection)

Применяет ось к выборке или переходу. Выборка должны содержать элемент svg или g. Например:

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

# axis.scale([scale])

Если указан параметр scale, устанавливает масштаб и возвращает ось. Если параметр scale не указан, возвращает текущий масштаб, который по умолчанию равен линейной шкале.

# axis.orient([orientation])

Если указан параметр orientation, устанавливает ориентацию оси и возвращает её. Если параметр orientation не указан, возвращает текущую ориентацию, которая по умолчанию равна «bottom». Поддерживаются следующие виды ориентации:

• top — горизонтальная ось с засечками над осью
• bottom — горизонтальная ось с засечками под осью
• left — горизонтальная ось с засечками слева от оси
• right — горизонтальная ось с засечками справа от оси

Если параметр orientation не является одним из поддерживаемых значений, ориентация оси вернётся к ориентации по умолчанию. Изменение ориентации затрагивает позиции засечек и из подписей относительно линии оси, но не изменяет позицию самой оси; для изменения позиции оси для соответствия её графику, укажите атрибут transform для содержащего ось элемента g.

# axis.ticks([arguments…])

Если указаны параметры arguments, сохраняет указанные аргументы для последующего использования в генерировании засечек и возвращает ось. Позже аргументы будут переданы в метод scale.ticks для генерирования значений засечек (только если значения засечек не определены явно с помощью метода axis.tickValues). Аргументы также передаются в метод шкалы tickFormat для генерирования формата подписей к засечкам по умолчанию. Если параметр arguments не указан, возвращает текущие аргументы засечек, которые по умолчанию равны [10]. linear scale, подходящие аргументы зависят от связанной шкалы: для линейной шкалы вы можете определить количество засечек, например axis.ticks(20); для логарифмической шкалы вы можете определить как количество засечек, так и формат их подписей; для временной шкалы может быть уместным временной интервал, например axis.ticks(d3.time.minutes, 15).

# axis.tickValues([values])

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

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

Явные значения засечек имеют приоритен над аргументами, установленными методом axis.ticks. Однако, любые аргументы засечек всё равно будут передаваться в функцию шкалы tickFormat, если формат засечек ещё не установлен; таким образом, не является ошибкой одновременная установка как axis.ticks, так и axis.tickValues.

# axis.tickSize([inner, outer])

Если указаны параметры inner и outer, устанавливает внутренний и внешний размеры засечки и возвращает ось. Если параметры inner и outer не указаны, возвращает текущий внутренний размер засечки, который по умолчанию равен 6.

# axis.innerTickSize([size])

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

# axis.outerTickSize([size])

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

# axis.tickPadding([padding])

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

# axis.tickFormat([format])

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

Смотрите документацию по d3.format для того, чтобы узнать, как создавать функции форматирования. Например, вызов axis.tickFormat(d3.format(",.0f")) будет отображать целые числа с запятой, как разделитель тысячных разрядов. Первоначальное определение функции форматирования: var commasFormatter = d3.format(",.0f") позволит вам вызывать её как функцию для ваших данных, например, для добавления знака валюты в начало ваших чисел: .tickFormat(function(d) { return "$" + commasFormatter(d); }).

Обратите внимание: для логарифмической шкалы количество засечек не может быть настроено; однако, количество подписей к засечкам может быть настроено через метод ticks. Кроме того, функция форматирования для логарифмической шкалы обычно определяется через функцию ticks, а не tickFormat, для того, чтобы сохранить поведение по умолчанию по скрытию подписей.