Оси SVG

Справочник API ▸ SVG ▸ Оси SVG

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

Ось

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

d3.svg.axis()

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

axis(выборка)

Применяет ось к выборке или переходу. Выборка должна содержать элемент 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([шкала])

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

axis.orient([ориентация])

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

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

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

axis.ticks([аргументы…])

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

Подходящие аргументы зависят от связанной шкалы: для линейной шкалы вы можете указать количество меток, например, axis.ticks(20); для логарифмической шкалы вы можете указать как количество, так и формат меток; для шкалы времени может подойти интервал времени, например, axis.ticks(d3.time.minutes, 15).

axis.tickValues([значения])

Если указан массив значений, указанные значения используются для меток вместо автоматического генератора меток шкалы. Если значения null, очищает любые ранее установленные явные значения меток, возвращаясь к генератору меток шкалы. Если значения не указаны, возвращает текущие установленные значения меток, которые по умолчанию равны 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([внутренний, внешний])

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

axis.innerTickSize([размер])

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

axis.outerTickSize([размер])

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

axis.tickPadding([отступ])

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

axis.tickFormat([формат])

Если указан формат, устанавливает формат в указанную функцию и возвращает ось. Если формат не указан, возвращает текущую функцию форматирования, которая по умолчанию равна 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, чтобы сохранить поведение по умолчанию по скрытию меток.