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="#000" d="M0.5,6V0.5H880.5V6"></path>
  <g class="tick" opacity="1" transform="translate(0.5,0)">
    <line stroke="#000" y2="6"></line>
    <text fill="#000" y="9" dy="0.71em">0.0</text>
  </g>
  <g class="tick" opacity="1" transform="translate(176.5,0)">
    <line stroke="#000" y2="6"></line>
    <text fill="#000" y="9" dy="0.71em">0.2</text>
  </g>
  <g class="tick" opacity="1" transform="translate(352.5,0)">
    <line stroke="#000" y2="6"></line>
    <text fill="#000" y="9" dy="0.71em">0.4</text>
  </g>
  <g class="tick" opacity="1" transform="translate(528.5,0)">
    <line stroke="#000" y2="6"></line>
    <text fill="#000" y="9" dy="0.71em">0.6</text>
  </g>
  <g class="tick" opacity="1" transform="translate(704.5,0)">
    <line stroke="#000" y2="6"></line>
    <text fill="#000" y="9" dy="0.71em">0.8</text>
  </g>
  <g class="tick" opacity="1" transform="translate(880.5,0)">
    <line stroke="#000" y2="6"></line>
    <text fill="#000" y="9" dy="0.71em">1.0</text>
  </g>
</g>

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

d3.axisTop(scale) Source

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

d3.axisRight(scale) Source

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

d3.axisBottom(scale) Source

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

d3.axisLeft(scale) Source

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

axis(context) Source

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

axis.scale([scale]) Source

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

axis.ticks(arguments…) Source
axis.ticks([count[, specifier]])
axis.ticks([interval[, specifier]])

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

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

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

axis.ticks(20, "s");

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

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

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

axis.ticks(10);

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

axis.tickArguments([10]);

axis.tickArguments([arguments]) Source

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

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

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

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

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

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

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

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

axis.tickValues([values]) Source

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

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

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

axis.tickFormat([format]) Source

Если 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]) Source

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

axis.tickSizeInner([size]) Source

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

axis.tickSizeOuter([size]) Source

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

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

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