RU Стековая компоновка
Вики ▸ Справка по API ▸ Компоновки ▸ Стековая компоновка
English | Русский
Стековая компоновка берёт двумерный массив данных и вычисляет базовую линию; затем эта базовая линия распространяется на вышележащие слои и таким образом получается многоуровневый график. Поддерживается несколько алгоритмов вычисления базовой линии, вместе с эвристикой сортировки для улучшения восприятия графика, как описано в статье «Многоуровневые графики — геометрия и эстетика» («Stacked Graphs—Geometry & Aesthetics») Байроном (Byron) и Ваттенбергом (Wattenberg).
Стековая компоновка работает в произвольном двумерном пространстве координат с координаттами x и y, подобно другим компоновкам D3, включая древовидную. Таким образом, слои могут располагаться вертикально, горизонтально или даже радиально. В то время, как смещение по умолчанию равно "zero", потоковый график может быть сгенерирован с использованием смещения "wiggle", которое пытается минимизировать изменения наклона, взвешенного по толщине слоя.
# d3.layout.stack()
Конструирует новую стековую компоновку с функциями доступа к смещению по умолчанию ("zero") и функцией сравнения (null). Возвращённый объект компоновки является одновременно объектом и функцией. Это значит, что вы можете вызвать компоновку как и любую другую функцию и в тоже время компоновка имеет дополнительные методы, изменяющие её поведение. Подобно другим классам в D3, компоновки следуют шаблону цепочечных методов, по которому методы-установщики возвращают саму компоновку, что позволяет выполнять несколько сеттеров в лаконичном выражении.
# stack(layers[, index])
Вычисляет координату y базовой линии для каждой серии (слоя) в массиве layers и затем распространяет эту базовую линию на другие слои. В простейшем случае layers является двумерным массивом значений. Все массивы внутри двумерного массива должны иметь одинаковую длину. Функции доступа к координатам y и x используются для определения толщины каждого слоя по оси y в позиции по оси x. Таким образом, по умолчанию для каждого значения требуются следующие атрибуты:
- x — позиция значения по x.
- y — толщина значения по y.
- y0 — минимальная позиция (базовая линия) значения по y.
Эти атрибуты могут быть настроены путём переопределения функций доступа и функции out.
# stack.values([accessor])
Определяет, как извлекать значения из ассоциированного элемента в масиве layers; параметр accessor является функцией, которая вызывается для каждого входного слоя, переданного в функцию stack, это эквивалентно вызову layers.map(accessor) перед вычислением стековой компоновки. Функция доступа к значению по умолчанию — это встроенный объект Object, который подобен единичной функции. Если параметр accessor не указан, возвращает текущую функцию доступа к значению.
Функции доступа к значению могут использоваться для задания дополнительный данных на каждый слой, а не только на каждую точку. Например, скажем, ваши даные структурированы следующим образом:
var layers = [
{
"name": "apples",
"values": [
{ "x": 0, "y": 91},
{ "x": 1, "y": 290}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9},
{ "x": 1, "y": 49}
]
}
];Определим функцию доступа к значению, которая возвращает точки для каждого слоя:
var stack = d3.layout.stack()
.offset("wiggle")
.values(function(d) { return d.values; });Затем, если вы хотите добавить всплывающую подсказку для каждого слоя, вы можете написать:
svg.selectAll("path")
.data(stack(layers))
.enter().append("path")
.attr("d", function(d) { return area(d.values); })
.append("title")
.text(function(d) { return d.name; });# stack.offset([offset])
Если указан параметр offset, устанавливает алгоритм смещения стека в указанное значение. Если параметр offset не указан, возвращает текущий алгоритм смещения. Поддерживаются следующие строковые значения:
- silhouette — центрирование потока, как в ThemeRiver.
- wiggle — минимизация взвешенного изменения в наклоне.
- expand — нормализация слоёв для заполнения диапазона [0, 1].
- zero — использование нулевой базовой линии, то есть, оси y.
Кроме строки, параметр offset также может быть задан функцией. Входным аргументом в функцию смещения передаются данные слоя, преобразованные в стандартизированное представление: двумерный массив значений, в котором каждое значение представляется двухэлементным массивом [x, y]. Возвращаемое значение функции смещения должно быть массивом значений, представляющих координаты y базовой линии. Например, смещение по умолчанию, "zero", реализовано следующим образом:
function offset(data) {
var j = -1,
m = data[0].length,
y0 = [];
while (++j < m) y0[j] = 0;
return y0;
}# stack.order([order])
Если указан параметр offset, устанавливает упорядочивание стека в указанное значение. Если параметр offset не указан, возвращает текущее упорядочивание. Поддерживаются следующие строковые значения:
- inside-out — сортировка по индексу максимального значения, затем использование сбалансированных весов.
- reverse — обратный порядок по отношению к входному порядку слоёв.
- default — прямой порядок входных слоёв.
Кроме строки, параметр order также может быть задан функцией. Входным аргументом в функцию упорядочивания передаются данные слоя, преобразованные в стандартизированное представление: двумерный массив значений, в котором каждое значение представляется двухэлементным массивом [x, y]. Возвращаемое значение функции упорядочивания должно быть массивом индексов, представляющих порядок слоёв. Например, упорядочивание по умолчанию, "default", реализовано следующим образом:
function order(data) {
return d3.range(data.length);
}Так же смотрите функцию d3.range.
# stack.x([accessor])
Определяет, как получать доступ к позиции x каждого значения. Если указан параметр accessor, устанавливает функцию доступа в указанную функцию. Если параметр accessor не указан, возвращает текущую функцию доступа, котороя по умолчанию предполагает, что входное значение имеет атрибут x:
function x(d) {
return d.x;
}Функция доступа к x вызывается для каждого входного значения, параметрами передаются текущие данные (d) и индекс (i). Возвращаемое значение функции доступа должно быть числом. Хотя функция доступа к x вызывается для всех слоёв (не только для самого нижнего слоя), стековая компоновка предполагает, что координаты x всех слоёв последовательны. Другими словами, стековая компоновка на текущий момент требует, чтобы слои были гомогенными: каждый из них должен содержать одинаковое количество значений по одинаковым координатам x. Если ваши данные не удовлетворяют этому условию, вы должны проинтерполировать их перед вычислением стековой компоновки.
# stack.y([accessor])
Определяет, как получать доступ к толщине y каждого значения. Если указан параметр accessor, устанавливает функцию доступа в указанную функцию. Если параметр accessor не указан, возвращает текущую функцию доступа, котороя по умолчанию предполагает, что входное значение имеет атрибут y:
function y(d) {
return d.y;
}Функция доступа к y вызывается для каждого входного значения каждого входного слоя, параметрами передаются текущие данные (d) и индекс (i). Возвращаемое значение функции доступа должно быть числом. За исключением смещения "expand", стековая компоновка не производит автоматического масштабирования данных. Для упрощения масштабирования, используйте эту компоновку в сочетании с линейными шкалами или подобными.
# stack.out([setter])
Определяет, как распространять вычисленную базовую линию на вышележащие слои. Если указан параметр setter, он используется как выходная функцию. Если параметр setter не указан, возвращает текущую выходную функцию, котороя по умолчанию предполагает, что входное значение имеет атрибуты y и y0:
function out(d, y0, y) {
d.y0 = y0;
d.y = y;
}Функция setter вызывается для каждого входного значения каждого входного слоя, параметрами передаются текущие данные (d), вычисленное значение y0 и вычисленное значение толщины y. Во всех случаях, кроме смещения "expand", толщина y является той же самой, что и входное значение, возвращённое функцией y и поэтому может игнорироваться.