RU Порядковые шкалы
Вики ▸ Справка по API ▸ Шкалы ▸ Порядковые шкалы
English | Русский
Шкалы — это функции, которые отображают значение из входного домена на выходной диапазон. Порядковые шкалы имеют дискретный домен, это может быть набор имён или категорий. Также существуют количественные шкалы, которые имеют непрерывный домен — это может быть набор действительных чисел. Шкалы — это необязательная возможность D3; вы можете их не использовать, если предпочитаете выполнять все вычисления самостоятельно. Однако, использование шкал может сильно упростить код, необходимый для отображения величины данных на их визуальное представление.
Объект шкалы, например, возвращаемый функцией d3.scale.ordinal является одновременно объектом и функцией. Это значит, что вы можете вызвать шкалу как и любую другую функцию и в тоже время шкала имеет дополнительные методы, изменяющие её поведение. Подобно другим классам в D3, шкалы следуют шаблону цепочечных методов, по которому методы-установщики возвращают саму шкалу, что позволяет выполнять несколько сеттеров в лаконичном выражении.
# d3.scale.ordinal()
Конструирует новую порядковую шкалу с пустыми доменом и диапазоном. Порядковая шкала является недействительной (всегда возвращает undefined), пока не указан выходной диапазон.
# ordinal(x)
По указанному значению x входного домена возвращает соответствующее значение в выходном диапазоне.
Если диапазон был указан явно (функцией range, но не функциями rangeBands, rangeRoundBands или rangePoints) и переданное значение x не находится в домене шкалы, оно будет неявно добавлено в домен; последующие вызовы шкалы с тем же самым значением x будут возвращать такое же значение y из выходного диапазона.
# ordinal.domain([values])
Если указан параметр values, устанавливает входной домен порядковой шкалы в указанный массив значений. Первый элемент в массиве values будет отображён на первый элемент в выходном диапазоне, второй элемент домена — на второе значение диапазона и так далее. Значения домена хранятся внутри в ассоциативном массиве как отображение из значения в индекс; результирующий индекс затем используется для получения значения из выходного диапазона. Таким образом, значения шкалы должны быть приводимыми в строку и приведённая в строку версия значения домена однозначно определяет соответствующее значение диапазона. Если параметр values не указан, метод возвращает текущий домен.
Установка домена на порядковых шкалах необязательна. Если никакой домен не установлен, диапазон должен быть установлен явно. Затем каждое уникальное значение, передаваемое в функцию scale, будет назначено новому значению из выходного диапазона; другими словами, домен будет косвенно выведен в процессе использования. Хотя таким образом домены могут конструироваться неявно, всё же хорошей идеей будет назначать домен порядковой шкале явно, чтобы гарантировалось детерминированное поведение, поскольку выведение домена в процессе использования зависит от порядка поступающих данных.
# ordinal.range([values])
Если указан параметр values, устанавливает выходной диапазон порядковой шкалы в указанный массив значений. Первый элемент в домене будет отображён на первый элемент в массиве values, второй элемент домена — на второе значение диапазона и так далее. Если в диапазоне меньше элементов, чем в домене, шкала зациклит значения из начала диапазона. Если параметр values не указан, метод возвращает текущий выходной диапазон.
Этот метод нужен тогда, когда установка дискретных выходных значений вычисляется явно, например при установке цветов категорий. В других случаях, например при определении схемы размещения порядковой диаграммы рассеяния или столбчатой диаграммы, вы можете найти операторы rangePoints или rangeBands более подходящими задаче.
# ordinal.rangePoints(interval[, padding])
Устанавливает выходной диапазон из указанного непрерывного интервала interval. Массив interval содержит два элемента, представляющих минимальное и максимальное числовые значения. Этот интервал делится на n равномерно расположенных точек, где n — это количество (уникальных) значений во входном домене. Первая и последняя точка могут быть смещены от границ интервала в соответствии с указанным полем padding, по умолчанию равным нулю. Поле padding определяет множитель расстояния между точками. Разумным значением является 1.0, при котором первая и последняя точка будут смещены от минимального и максимального значения на половину расстояния между точками.
d3.scale.ordinal().domain([1, 2, 3, 4]).rangePoints([0, 100], 0).range();
// вернёт [0, 33.333333333333336, 66.66666666666667, 100]# ordinal.rangeBands(interval[, padding[, outerPadding]])
Устанавливает выходной диапазон из указанного непрерывного интервала interval. Массив interval содержит два элемента, представляющих минимальное и максимальное числовые значения. Этот интервал делится на n равномерно расположенных полос, где n — это количество (уникальных) значений во входном домене. Полосы могут быть смещены от границ интервала в соответствии с указанным полем padding, по умолчанию равным нулю. Значение padding обычно находится в диапазоне [0, 1] и соответствует размеру пробела в интервале диапазона, выделяемого под поля. Значение 0.5 означает, что ширина полосы будет равна ширине поля. Аргумент outerPadding делает тоже самое для всей группы полос; значение 0 означает, что поля будут только между полосами.
var o = d3.scale.ordinal().domain([1, 2, 3, 4]).rangeBands([0, 100]);
o.rangeBand(); // вернёт 25
o.range(); // вернёт [0, 25, 50, 75]
o.rangeExtent(); // вернёт [0, 100]# ordinal.rangeRoundBands(interval[, padding[, outerPadding]])
Подобно rangeBands, за исключение того, что ещё и гарантирует, что ширина полос и смещения будут целыми числами, например, для избегания артефактов, связанных со сглаживанием.
var o1 = d3.scale.ordinal().domain([1, 2, 3]).rangeBands([0, 100], 0, 0);
o1.range(); // вернёт [0, 33.333333333333336, 66.66666666666667]
o1.rangeBand(); // вернёт 33.333333333333336
var o2 = d3.scale.ordinal().domain([1, 2, 3]).rangeRoundBands([0, 100], 0, 0);
o2.range(); // вернёт [1, 34, 67]
o2.rangeBand(); // вернёт 33# ordinal.rangeBand()
Возвращает ширину полосы. Когда диапазон шкалы задан с помощью функций rangeBands или rangeRoundBands, шкала возвращает нижнее значение для переданного входа. Верхнее значение может быть вычислено путём прибавления ширины полосы. Если диапазон шкалы задан через функции range или rangePoints, ширина полосы будет равна нулю.
# ordinal.rangeExtent()
Возвращает двух-элементный массив, представляющий границы диапазона шкалы, то есть наименьшее и наибольшее значения.
# ordinal.copy()
Возвращает точную копию текущей порядковой шкалы. Изменения текущей шкалы не будут затрагивать возвращённую шкалу, и наоборот.
# d3.scale.category10()
Конструирует новую порядковую шкалу с диапазоном из десяти цветов категорий: #1f77b4 #ff7f0e #2ca02c #d62728 #9467bd #8c564b #e377c2 #7f7f7f #bcbd22 #17becf.
# d3.scale.category20()
Конструирует новую порядковую шкалу с диапазоном из двадцати цветов категорий: #1f77b4 #aec7e8 #ff7f0e #ffbb78 #2ca02c #98df8a #d62728 #ff9896 #9467bd #c5b0d5 #8c564b #c49c94 #e377c2 #f7b6d2 #7f7f7f #c7c7c7 #bcbd22 #dbdb8d #17becf #9edae5.
# d3.scale.category20b()
Конструирует новую порядковую шкалу с диапазоном из двадцати цветов категорий: #393b79 #5254a3 #6b6ecf #9c9ede #637939 #8ca252 #b5cf6b #cedb9c #8c6d31 #bd9e39 #e7ba52 #e7cb94 #843c39 #ad494a #d6616b #e7969c #7b4173 #a55194 #ce6dbd #de9ed6.
# d3.scale.category20c()
Конструирует новую порядковую шкалу с диапазоном из двадцати цветов категорий: #3182bd #6baed6 #9ecae1 #c6dbef #e6550d #fd8d3c #fdae6b #fdd0a2 #31a354 #74c476 #a1d99b #c7e9c0 #756bb1 #9e9ac8 #bcbddc #dadaeb #636363 #969696 #bdbdbd #d9d9d9.
D3 также предоставляет привязку к некоторым фантастическим цветовым шкалам категорий от Синтии Брюер (Cynthia Brewer). Вы можете найти их либо в CSS, либо в JavaScript по пути lib/colorbrewer.
При использовании CSS, присвойте классы вроде "q0-3", "q1-3" или "q2-3" элементам, которые вы хотите заполнить. Затем, установите класс на родительский элемент (например, элемент SVG) в выбранное название цветовой шкалы, например, "RdBu" или "Blues". Примеры смотрите здесь: календарная тепловая карта, картограмма.
При использовании JavaScript вы можете использовать colorbrewer.RdBu[9] или эквиваленты в качестве диапазона для d3.scale.ordinal. Например:
var z = d3.scale.ordinal()
.domain(["foo", "bar", "baz"])
.range(colorbrewer.RdBu[9]);