d3-shape

Визуализации обычно состоят из отдельных графических знаков, таких как символы, дуги, линии и области. Хотя прямоугольники гистограммы могут быть достаточно легко сгенерированы непосредственно с помощью SVG или Canvas, другие формы сложные, такие как округлые кольцевые сектора и центрально-касательные сплайны Catmull–Rom. Этот модуль предоставляет различные генераторы форм для вашего удобства.

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

var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });

Этот генератор линий затем может быть использован для вычисления d атрибута элемента пути SVG:

path.datum(data).attr("d", line);

Или вы можете использовать его для рендеринга в контексте 2D Canvas:

line.context(context)(data);

Для более подробной информации, прочитайте Вступление к d3-shape.

Установка

Если вы используете NPM, npm install d3-shape. В противном случае скачайте последнюю версию. Вы также можете загрузить её напрямую с d3js.org, как отдельную библиотеку или как часть D3 4.0. Поддерживаются среды AMD, CommonJS и vanilla. В vanilla экспортируется глобальная переменная d3:

<script src="https://d3js.org/d3-path.v1.min.js"></script>
<script src="https://d3js.org/d3-shape.v1.min.js"></script>
<script>

var line = d3.line();

</script>

Попробуйте d3-shape в вашем браузере.

Ссылка на API

• Дуги
• Пироги
• Линии
• Площади
• Кривые
• Пользовательские кривые
• Связи
• Символы
• Пользовательские типы символов
• Стопки

Дуги

Генератор дуг создаёт круговой или кольцевой сектор, как на диаграмме круговой или кольцевой диаграммы. Если разница между углами начала start и конца end (угловой размах) больше, чем τ, генератор дуг создаст полную окружность или кольцо. Если меньше τ, дуги могут иметь скругленные углы и угловое заполнение. Дуги всегда центрированы в ⟨0,0⟩; используйте преобразование (см.: SVG, Canvas), чтобы переместить дугу в другое положение.

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

d3.arc() Источник

Создаёт новый генератор дуг с параметрами по умолчанию.

arc(arguments…) Источник

Генерирует дугу для заданных arguments. arguments произвольные; они просто передаются в аксессоры генератора дуг вместе с this объектом. Например, с параметрами по умолчанию ожидается объект с радиусами и углами:

var arc = d3.arc();

arc({
  innerRadius: 0,
  outerRadius: 100,
  startAngle: 0,
  endAngle: Math.PI / 2
}); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

Если радиусы и углы заданы как константы, вы можете сгенерировать дугу без аргументов:

var arc = d3.arc()
    .innerRadius(0)
    .outerRadius(100)
    .startAngle(0)
    .endAngle(Math.PI / 2);

arc(); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

Если у генератора дуг есть контекст, то дуга рендерится в этом контексте как последовательность вызовов метода path, и эта функция возвращает void. В противном случае возвращается строка данных пути.

arc.centroid(arguments…) Источник

Вычисляет середину [x, y] центральной линии дуги, которая была бы сгенерирована заданными arguments. arguments произвольные; они просто передаются в аксессоры генератора дуг вместе с this объектом. Для согласованности с сгенерированной дугой, аксессоры должны быть детерминированными, т.е., возвращать одно и то же значение при одних и тех же аргументах. Середина определяется как (startAngle + endAngle) / 2 и (innerRadius + outerRadius) / 2. Например:

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

arc.innerRadius([radius]) Источник

Если radius указан, устанавливает внутренний радиус в указанную функцию или число и возвращает этот генератор дуг. Если radius не указан, возвращает текущий аксессор внутреннего радиуса, который по умолчанию:

function innerRadius(d) {
  return d.innerRadius;
}

Указание внутреннего радиуса как функции полезно для построения стопки полярных столбчатых диаграмм, часто в сочетании со sqrt scale. Чаще используется постоянный внутренний радиус для кольцевой или круговой диаграммы. Если внешний радиус меньше внутреннего радиуса, внутренние и внешние радиусы меняются местами. Отрицательное значение обрабатывается как ноль.

arc.outerRadius([radius]) Источник

Если radius указан, устанавливает внешний радиус в указанную функцию или число и возвращает этот генератор дуг. Если radius не указан, возвращает текущий аксессор внешнего радиуса, который по умолчанию:

function outerRadius(d) {
  return d.outerRadius;
}

Указание внешнего радиуса как функции полезно для построения диаграмм сопоставимости или полярных столбчатых диаграмм, часто в сочетании со sqrt scale. Чаще используется постоянный внешний радиус для круговой или кольцевой диаграммы. Если внешний радиус меньше внутреннего радиуса, внутренние и внешние радиусы меняются местами. Отрицательное значение обрабатывается как ноль.

arc.cornerRadius([radius]) Источник

Если radius указан, устанавливает радиус угла в указанную функцию или число и возвращает этот генератор дуг. Если radius не указан, возвращает текущий аксессор радиуса угла, который по умолчанию:

function cornerRadius() {
  return 0;
}

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

Радиус угла не может быть больше, чем (outerRadius - innerRadius) / 2. Кроме того, для дуг с угловым размахом меньше π, радиус угла может быть уменьшен, так как две смежные скругленные вершины пересекаются. Это чаще происходит с внутренними углами. См. анимацию углов дуги для иллюстрации.

arc.startAngle([angle]) Источник

Если angle указан, устанавливает начальный угол в указанную функцию или число и возвращает этот генератор дуг. Если angle не указан, возвращает текущий аксессор начального угла, который по умолчанию:

function startAngle(d) {
  return d.startAngle;
}

Угол задаётся в радианах, причём 0 соответствует -y (12 часов), и положительные углы идут по часовой стрелке. Если |endAngle - startAngle| ≥ τ, генерируется полная окружность или кольцо, а не сектор.

arc.endAngle([angle]) Источник

Если angle указан, устанавливает конечный угол в указанную функцию или число и возвращает этот генератор дуг. Если angle не указан, возвращает текущий аксессор конечного угла, который по умолчанию:

function endAngle(d) {
  return d.endAngle;
}

Угол задаётся в радианах, причём 0 соответствует -y (12 часов), и положительные углы идут по часовой стрелке. Если |endAngle - startAngle| ≥ τ, генерируется полная окружность или кольцо, а не сектор.

arc.padAngle([angle]) Источник

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

function padAngle() {
  return d && d.padAngle;
}

Угол заполнения преобразуется в фиксированное линейное расстояние, разделяющее смежные дуги, определённое как padRadius * padAngle. Это расстояние вычитается поровну из начала и конца дуги. Если дуга образует полную окружность или кольцо, как когда |endAngle - startAngle| ≥ τ, угол заполнения игнорируется.

Если внутренний радиус или угловой размах невелики по сравнению с углом заполнения, может быть невозможно сохранить параллельные края между смежными дугами. В этом случае внутренний край дуги может схлопнуться до точки, подобно круговому сектору. По этой причине заполнение обычно применяется только к кольцевым секторам (т.е., когда innerRadius положительный), как показано на этой диаграмме:

Рекомендуемый минимальный внутренний радиус при использовании заполнения — outerRadius * padAngle / sin(θ), где θ — угловой размах самой маленькой дуги до заполнения. Например, если внешний радиус составляет 200 пикселей, а угол заполнения — 0,02 радиана, разумное значение θ — 0,04 радиана, и разумный внутренний радиус — 100 пикселей. См. анимацию заполнения дуги для иллюстрации.

Часто угол отступа (pad angle) не устанавливается непосредственно в генераторе дуг (arc generator), а вычисляется генератором секторов (pie generator), чтобы гарантировать, что площадь дуг с отступом пропорциональна их значению; см. генератор секторов.padAngle. Посмотрите анимацию отступа секторов для иллюстрации. Если вы применяете постоянный угол отступа к генератору дуг напрямую, он, как правило, непропорционально уменьшает меньшие дуги, внося искажения.

arc.padRadius([radius]) Источник

Если radius указан, устанавливает радиус отступа (pad radius) в указанную функцию или число и возвращает этот генератор дуг. Если radius не указан, возвращает текущий аксессор радиуса отступа, который по умолчанию равен null, что означает, что радиус отступа должен вычисляться автоматически как sqrt(innerRadius * innerRadius + outerRadius * outerRadius). Радиус отступа определяет фиксированное линейное расстояние, разделяющее смежные дуги, определяемое как padRadius * padAngle.

arc.context([context]) Источник

Если context указан, устанавливает контекст и возвращает этот генератор дуг. Если context не указан, возвращает текущий контекст, который по умолчанию равен null. Если контекст не равен null, то сгенерированная дуга (arc) отображается в этом контексте как последовательность вызовов методов пути (path method). В противном случае возвращается строка данных пути (path data), представляющая сгенерированную дугу.

Секторы (Pies)

Генератор секторов (pie generator) не создает форму непосредственно, а вместо этого вычисляет необходимые углы для представления табличных данных в виде круговой или кольцевой диаграммы; эти углы затем могут быть переданы генератору дуг (arc generator).

d3.pie() Источник

Создаёт новый генератор секторов (pie generator) с настройками по умолчанию.

pie(data[, arguments…]) Источник

Генерирует сектор для заданного массива data, возвращая массив объектов, представляющих углы дуг каждого элемента данных. Любые дополнительные arguments являются произвольными; они просто передаются в функции-аксессоры генератора секторов вместе с объектом this. Длина возвращаемого массива совпадает с длиной data, и каждый элемент i в возвращаемом массиве соответствует элементу i во входных данных. Каждый объект в возвращаемом массиве имеет следующие свойства:

• data - входной элемент данных; соответствующий элемент в массиве входных данных.
• value - числовое значение дуги (value).
• index - индекс дуги (от 0) после сортировки (sorted index).
• startAngle - начальный угол дуги (start angle).
• endAngle - конечный угол дуги (end angle).
• padAngle - угол отступа дуги (pad angle).

Эта структура данных предназначена для работы с аксессорами startAngle, endAngle и padAngle генератора дуг по умолчанию. Угловые единицы произвольные, но если вы планируете использовать генератор секторов вместе с генератором дуг, вам следует указывать углы в радианах, где 0 соответствует оси -y (12 часов), а положительные углы идут по часовой стрелке.

Для небольшого набора чисел вот как вычислить углы дуг для отображения этих данных в виде круговой диаграммы:

var data = [1, 1, 2, 3, 5, 8, 13, 21];
var arcs = d3.pie()(data);

Первая пара скобок, pie(), создаёт генератор секторов по умолчанию. Вторая, pie()(data), вызывает этот генератор на наборе данных, возвращая массив объектов:

[
  {"data":  1, "value":  1, "index": 6, "startAngle": 6.050474740247008, "endAngle": 6.166830023713296, "padAngle": 0},
  {"data":  1, "value":  1, "index": 7, "startAngle": 6.166830023713296, "endAngle": 6.283185307179584, "padAngle": 0},
  {"data":  2, "value":  2, "index": 5, "startAngle": 5.817764173314431, "endAngle": 6.050474740247008, "padAngle": 0},
  {"data":  3, "value":  3, "index": 4, "startAngle": 5.468698322915565, "endAngle": 5.817764173314431, "padAngle": 0},
  {"data":  5, "value":  5, "index": 3, "startAngle": 4.886921905584122, "endAngle": 5.468698322915565, "padAngle": 0},
  {"data":  8, "value":  8, "index": 2, "startAngle": 3.956079637853813, "endAngle": 4.886921905584122, "padAngle": 0},
  {"data": 13, "value": 13, "index": 1, "startAngle": 2.443460952792061, "endAngle": 3.956079637853813, "padAngle": 0},
  {"data": 21, "value": 21, "index": 0, "startAngle": 0.000000000000000, "endAngle": 2.443460952792061, "padAngle": 0}
]

Обратите внимание, что возвращаемый массив имеет тот же порядок, что и данные, даже несмотря на то, что эта круговая диаграмма отсортирована по убыванию значения, начиная с дуги последнего элемента данных (значение 21) на 12 часах.

pie.value([value]) Источник

Если value указан, устанавливает аксессор значения в указанную функцию или число и возвращает этот генератор секторов. Если value не указан, возвращает текущий аксессор значения, который по умолчанию равен:

function value(d) {
  return d;
}

Когда сектор генерируется, аксессор значения будет вызван для каждого элемента в массиве входных данных, получив в качестве аргументов элемент d, индекс i, и массив data. Аксессор значения по умолчанию предполагает, что входные данные — это числа или что их можно преобразовать в числа с помощью valueOf. Если ваши данные не являются просто числами, вам следует указать аксессор, который возвращает соответствующее числовое значение для заданного элемента данных. Например:

var data = [
  {"number":  4, "name": "Locke"},
  {"number":  8, "name": "Reyes"},
  {"number": 15, "name": "Ford"},
  {"number": 16, "name": "Jarrah"},
  {"number": 23, "name": "Shephard"},
  {"number": 42, "name": "Kwon"}
];

var arcs = d3.pie()
    .value(function(d) { return d.number; })
    (data);

Это аналогично преобразованию ваших данных в значения перед вызовом генератора секторов:

var arcs = d3.pie()(data.map(function(d) { return d.number; }));

Преимущество аксессора заключается в том, что входные данные остаются связанными с возвращаемыми объектами, что облегчает доступ к другим полям данных, например, для установки цвета или добавления текстовых меток.

pie.sort([compare]) Источник

Если compare указан, устанавливает компаратор данных в указанную функцию и возвращает этот генератор секторов. Если compare не указан, возвращает текущий компаратор данных, который по умолчанию равен null. Если оба компаратора данных и значений равны null, то дуги располагаются в исходном порядке входных данных. В противном случае данные сортируются в соответствии с компаратором данных, и полученный порядок используется. Установка компаратора данных подразумевает установку компаратора значений (value comparator) в null.

Функция compare принимает два аргумента a и b, каждый из которых является элементом массива входных данных. Если дуга для a должна быть перед дугой для b, то компаратор должен вернуть число меньше нуля; если дуга для a должна быть после дуги для b, то компаратор должен вернуть число больше нуля; возврат нуля означает, что относительный порядок a и b не определён. Например, чтобы отсортировать дуги по их соответствующему имени:

pie.sort(function(a, b) { return a.name.localeCompare(b.name); });

Сортировка не влияет на порядок возвращаемого массива дуг (generated arc array), который всегда имеет тот же порядок, что и массив входных данных; она лишь влияет на вычисленные углы каждой дуги. Первая дуга начинается с начального угла (start angle), а последняя дуга заканчивается конечным углом (end angle).

pie.sortValues([compare]) Источник

Если compare указан, устанавливает компаратор значений в указанную функцию и возвращает этот генератор секторов. Если compare не указан, возвращает текущий компаратор значений, который по умолчанию задан убыванием. По умолчанию компаратор значений реализуется как:

function compare(a, b) {
  return b - a;
}

Если оба компаратора данных и значений равны null, то дуги располагаются в исходном порядке входных данных. В противном случае данные сортируются в соответствии с компаратором данных, и полученный порядок используется. Установка компаратора значений подразумевает установку компаратора данных (data comparator) в null.

Компаратор значений аналогичен компаратору данных, за исключением того, что два аргумента a и b являются значениями, полученными из массива входных данных с помощью аксессора значения (value accessor), а не самими элементами данных. Если дуга для a должна быть перед дугой для b, то компаратор должен вернуть число меньше нуля; если дуга для a должна быть после дуги для b, то компаратор должен вернуть число больше нуля; возврат нуля означает, что относительный порядок a и b не определён. Например, чтобы отсортировать дуги по возрастанию значения:

pie.sortValues(function(a, b) { return a - b; });

Сортировка не влияет на порядок возвращаемого массива дуг (generated arc array), который всегда имеет тот же порядок, что и массив входных данных; она лишь влияет на вычисленные углы каждой дуги. Первая дуга начинается с начального угла (start angle), а последняя дуга заканчивается конечным углом (end angle).

pie.startAngle([angle]) Источник

Если angle указан, устанавливает общий начальный угол сектора в указанную функцию или число и возвращает этот генератор секторов. Если angle не указан, возвращает текущий аксессор начального угла, который по умолчанию равен:

function startAngle() {
  return 0;
}

Начальный угол здесь означает общий начальный угол сектора, т.е. начальный угол первой дуги. Аксессор начального угла вызывается один раз, получив в качестве аргументов те же аргументы и контекст, что и генератор секторов (pie generator).

pie.endAngle([angle]) Источник

Если angle указан, устанавливает общий конечный угол сектора в указанную функцию или число и возвращает этот генератор секторов. Если angle не указан, возвращает текущий аксессор конечного угла, который по умолчанию равен:

function endAngle() {
  return 2 * Math.PI;
}

Конечный угол здесь означает общий конечный угол сектора, т.е. конечный угол последней дуги. Аксессор конечного угла вызывается один раз, получив в качестве аргументов те же аргументы и контекст, что и генератор секторов (pie generator).

Значение конечного угла ограничено начальным углом (startAngle) ± τ, таким образом |endAngle - startAngle| ≤ τ.

pie.padAngle([angle]) Source

Если angle указано, устанавливает угол отступа до указанной функции или числа и возвращает этот генератор круговой диаграммы. Если angle не указано, возвращает текущий аксессор угла отступа, который по умолчанию равен:

function padAngle() {
  return 0;
}

Здесь угол отступа означает угловое расстояние между каждой смежной дугой. Общий объем отступа — это указанный angle умноженный на количество элементов в массиве входных данных, и не более |endAngle - startAngle|; оставшееся пространство затем делится пропорционально на значение таким образом, чтобы относительная площадь каждой дуги сохранялась. Посмотрите на анимацию отступа круговой диаграммы для иллюстрации. Аксессор угла отступа вызывается один раз, получая те же аргументы и this контекст, что и генератор круговой диаграммы. Единицы измерения angle произвольные, но если вы планируете использовать генератор круговой диаграммы вместе с генератором дуги, вы должны указать угол в радианах.

Линии

Генератор линий создает сплайн или ломаную, как в диаграмме с линиями. Линии также встречаются во многих других типах визуализаций, таких как связи в связках ребер иерархической структуры.

d3.line() Source

Создает новый генератор линий со значениями по умолчанию.

line(data) Source

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

line.x([x]) Source

Если x указано, устанавливает аксессор x до указанной функции или числа и возвращает этот генератор линий. Если x не указано, возвращает текущий аксессор x, который по умолчанию:

function x(d) {
  return d[0];
}

Когда линия генерируется, аксессор x будет вызываться для каждого определенного элемента в массиве входных данных, получая элемент d, индекс i, и массив data в качестве трех аргументов. По умолчанию аксессор x предполагает, что входные данные — это массивы из двух чисел. Если ваши данные в другом формате, или если вы хотите преобразовать данные перед отрисовкой, вы должны указать пользовательский аксессор. Например, если x — шкала времени, а y — линейная шкала:

var data = [
  {date: new Date(2007, 3, 24), value: 93.24},
  {date: new Date(2007, 3, 25), value: 95.35},
  {date: new Date(2007, 3, 26), value: 98.84},
  {date: new Date(2007, 3, 27), value: 99.92},
  {date: new Date(2007, 3, 30), value: 99.80},
  {date: new Date(2007, 4,  1), value: 99.47},
  …
];

var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });

line.y([y]) Source

Если y указано, устанавливает аксессор y до указанной функции или числа и возвращает этот генератор линий. Если y не указано, возвращает текущий аксессор y, который по умолчанию:

function y(d) {
  return d[1];
}

Когда линия генерируется, аксессор y будет вызываться для каждого определенного элемента в массиве входных данных, получая элемент d, индекс i, и массив data в качестве трех аргументов. По умолчанию аксессор y предполагает, что входные данные — это массивы из двух чисел. См. line.x для получения дополнительной информации.

line.defined([defined]) Source

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

function defined() {
  return true;
}

Таким образом, аксессор по умолчанию предполагает, что входные данные всегда определены. Когда линия генерируется, аксессор defined будет вызываться для каждого элемента в массиве входных данных, получая элемент d, индекс i, и массив data в качестве трех аргументов. Если заданный элемент определен (т. е., если аксессор defined возвращает истинное значение для этого элемента), аксессоры x и y будут вызваны позже, и точка будет добавлена к текущему сегменту линии. В противном случае элемент будет пропущен, текущий сегмент линии будет завершён, и для следующей определённой точки будет сгенерирован новый сегмент линии. В результате сгенерированная линия может иметь несколько отдельных сегментов. Например:

Обратите внимание, что если сегмент линии состоит только из одной точки, он может быть невидим, если не отрисовать его со скругленными или прямоугольными концами линий. Кроме того, некоторые кривые, такие как curveCardinalOpen, отображают видимый сегмент только в том случае, если он содержит несколько точек.

line.curve([curve]) Source

Если curve указано, устанавливает фабрику кривой и возвращает этот генератор линий. Если curve не указано, возвращает текущую фабрику кривой, которая по умолчанию равна curveLinear.

line.context([context]) Source

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

d3.lineRadial() Source

Создает новый генератор радиальных линий со значениями по умолчанию. Генератор радиальных линий эквивалентен стандартному декартову генератору линий, за исключением того, что аксессоры x и y заменены аксессорами angle и radius. Радиальные линии всегда позиционируются относительно ⟨0,0⟩; используйте преобразование (см.: SVG, Canvas), чтобы изменить начало отсчета.

lineRadial(data) Source

Эквивалентно line.

lineRadial.angle([angle]) Source

Эквивалентно line.x, за исключением того, что аксессор возвращает угол в радианах, где 0 находится в точке -y (12 часов).

lineRadial.radius([radius]) Source

Эквивалентно line.y, за исключением того, что аксессор возвращает радиус: расстояние от начала отсчета ⟨0,0⟩.

lineRadial.defined([defined])

Эквивалентно line.defined.

lineRadial.curve([curve]) Source

Эквивалентно line.curve. Обратите внимание, что curveMonotoneX или curveMonotoneY не рекомендуются для радиальных линий, потому что они предполагают, что данные монотонны по x или y, что обычно неверно для радиальных линий.

lineRadial.context([context])

Эквивалентно line.context.

Площади

Генератор площадей создает площадь, как в диаграмме с областями. Площадь определяется двумя ограничивающими линиями, либо сплайнами, либо ломаными. Обычно две линии имеют одинаковые значения x (x0 = x1), отличаясь только значениями y (y0 и y1); чаще всего y0 определяется как константа, представляющая ноль. Первая линия (верхняя линия) определяется x1 и y1 и отрисовывается первой; вторая линия (нижняя линия) определяется x0 и y0 и отрисовывается второй, с точками в обратном порядке. С curveLinear кривой это создает многоугольник по часовой стрелке.

d3.area() Source

Создаёт новый генератор областей со значениями по умолчанию.

area(data) Source

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

area.x([x]) Источник

Если x указан, устанавливает x0 на x и x1 на null и возвращает этот генератор области. Если x не указан, возвращает текущую функцию доступа к x0.

area.x0([x]) Источник

Если x указан, устанавливает функцию доступа к x0 на указанную функцию или число и возвращает этот генератор области. Если x не указан, возвращает текущую функцию доступа к x0, которая по умолчанию:

function x(d) {
  return d[0];
}

Когда область генерируется, функция доступа к x0 вызывается для каждого определённого элемента в массиве входных данных, получая элемент d, индекс i, и массив data в качестве трёх аргументов. По умолчанию функция доступа к x0 предполагает, что входные данные — это массивы из двух числовых элементов. Если ваши данные имеют другой формат, или если вы хотите преобразовать данные перед отрисовкой, вы должны указать пользовательскую функцию доступа. Например, если x — это шкала времени, а y — это линейная шкала:

var data = [
  {date: new Date(2007, 3, 24), value: 93.24},
  {date: new Date(2007, 3, 25), value: 95.35},
  {date: new Date(2007, 3, 26), value: 98.84},
  {date: new Date(2007, 3, 27), value: 99.92},
  {date: new Date(2007, 3, 30), value: 99.80},
  {date: new Date(2007, 4,  1), value: 99.47},
  …
];

var area = d3.area()
    .x(function(d) { return x(d.date); })
    .y1(function(d) { return y(d.value); })
    .y0(y(0));

area.x1([x]) Источник

Если x указан, устанавливает функцию доступа к x1 на указанную функцию или число и возвращает этот генератор области. Если x не указан, возвращает текущую функцию доступа к x1, которая по умолчанию равна null, что означает, что ранее вычисленное значение x0 должно использоваться для значения x1.

Когда область генерируется, функция доступа к x1 вызывается для каждого определённого элемента в массиве входных данных, получая элемент d, индекс i, и массив data в качестве трёх аргументов. Смотрите area.x0 для получения дополнительной информации.

area.y([y]) Источник

Если y указан, устанавливает y0 на y и y1 на null и возвращает этот генератор области. Если y не указан, возвращает текущую функцию доступа к y0.

area.y0([y]) Источник

Если y указан, устанавливает функцию доступа к y0 на указанную функцию или число и возвращает этот генератор области. Если y не указан, возвращает текущую функцию доступа к y0, которая по умолчанию:

function y() {
  return 0;
}

Когда область генерируется, функция доступа к y0 вызывается для каждого определённого элемента в массиве входных данных, получая элемент d, индекс i, и массив data в качестве трёх аргументов. Смотрите area.x0 для получения дополнительной информации.

area.y1([y]) Источник

Если y указан, устанавливает функцию доступа к y1 на указанную функцию или число и возвращает этот генератор области. Если y не указан, возвращает текущую функцию доступа к y1, которая по умолчанию:

function y(d) {
  return d[1];
}

Разрешается также функция доступа null, что означает, что ранее вычисленное значение y0 должно использоваться для значения y1. Когда область генерируется, функция доступа к y1 вызывается для каждого определённого элемента в массиве входных данных, получая элемент d, индекс i, и массив data в качестве трёх аргументов. Смотрите area.x0 для получения дополнительной информации.

area.defined([defined]) Источник

Если defined указан, устанавливает функцию доступа defined на указанную функцию или булево значение и возвращает этот генератор области. Если defined не указан, возвращает текущую функцию доступа defined, которая по умолчанию:

function defined() {
  return true;
}

Таким образом, функция доступа по умолчанию предполагает, что входные данные всегда определены. Когда область генерируется, функция доступа defined вызывается для каждого элемента в массиве входных данных, получая элемент d, индекс i, и массив data в качестве трёх аргументов. Если данный элемент определён (т.е., если функция доступа defined возвращает истинное значение для этого элемента), функции доступа x0, x1, y0 и y1 будут затем оценены, и точка будет добавлена к текущему сегменту области. В противном случае элемент будет пропущен, текущий сегмент области будет завершён, и новый сегмент области будет сгенерирован для следующей определённой точки. В результате сгенерированная область может иметь несколько отдельных сегментов. Например:

Обратите внимание, что если сегмент области состоит только из одной точки, он может быть невидим, если не отображается с закруглёнными или квадратными концами линий. Кроме того, некоторые кривые, такие как curveCardinalOpen, отображают видимый сегмент только в том случае, если он содержит несколько точек.

area.curve([curve]) Источник

Если curve указан, устанавливает фабрику кривой и возвращает этот генератор области. Если curve не указан, возвращает текущую фабрику кривой, которая по умолчанию равна curveLinear.

area.context([context]) Источник

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

area.lineX0() Источник
area.lineY0() Источник

Возвращает новый генератор линии, у которого есть текущий функция доступа defined генератора области, кривая и контекст. Функция доступа x линии — это функция доступа x0 этой области, а функция доступа y линии — это функция доступа y0 этой области.

area.lineX1() Источник

Возвращает новый генератор линии, у которого есть текущий функция доступа defined генератора области, кривая и контекст. Функция доступа x линии — это функция доступа x1 этой области, а функция доступа y линии — это функция доступа y0 этой области.

area.lineY1() Источник

Возвращает новый генератор линии, у которого есть текущий функция доступа defined генератора области, кривая и контекст. Функция доступа x линии — это функция доступа x0 этой области, а функция доступа y линии — это функция доступа y1 этой области.

d3.areaRadial() Источник

Создаёт новый генератор радиальной области с настройками по умолчанию. Генератор радиальной области эквивалентен стандартному декартову генератору области, за исключением того, что функции доступа x и y заменены функциями доступа угол и радиус. Радиальные области всегда позиционируются относительно ⟨0,0⟩; используйте преобразование (см.: SVG, Canvas), чтобы изменить начало отсчёта.

areaRadial(data)

Эквивалентно area.

areaRadial.angle([angle]) Источник

Эквивалентно area.x, за исключением того, что функция доступа возвращает угол в радианах, где 0 находится в точке -y (12 часов).

areaRadial.startAngle([angle]) Источник

Эквивалентно area.x0, за исключением того, что функция доступа возвращает угол в радианах, где 0 находится в точке -y (12 часов). Примечание: обычно используется угол вместо установки отдельных углов начала и конца.

areaRadial.endAngle([angle]) Источник

Эквивалентно area.x1, за исключением того, что функция доступа возвращает угол в радианах, где 0 находится в точке -y (12 часов). Примечание: обычно используется угол вместо установки отдельных углов начала и конца.

areaRadial.radius([radius]) Источник

Эквивалентно area.y, за исключением того, что функция доступа возвращает радиус: расстояние от начала координат ⟨0,0⟩.

areaRadial.innerRadius([radius]) Source

Эквивалентно area.y0, за исключением того, что аксессор возвращает радиус: расстояние от начала координат ⟨0,0⟩.

areaRadial.outerRadius([radius]) Source

Эквивалентно area.y1, за исключением того, что аксессор возвращает радиус: расстояние от начала координат ⟨0,0⟩.

areaRadial.defined([defined])

Эквивалентно area.defined.

areaRadial.curve([curve]) Source

Эквивалентно area.curve. Обратите внимание, что curveMonotoneX или curveMonotoneY не рекомендуются для радиальных областей, так как они предполагают, что данные монотонны по x или y, что обычно неверно для радиальных областей.

areaRadial.context([context])

Эквивалентно line.context.

areaRadial.lineStartAngle() Source
areaRadial.lineInnerRadius() Source

Возвращает новый генератор радиальной линии radial line generator, который имеет текущий аксессор определения defined accessor, кривую curve и контекст context. Аксессор угла линии — это аксессор начального угла области, а аксессор радиуса линии — это аксессор внутреннего радиуса области.

areaRadial.lineEndAngle() Source

Возвращает новый генератор радиальной линии radial line generator, который имеет текущий аксессор определения defined accessor, кривую curve и контекст context. Аксессор угла линии — это аксессор конечного угла области, а аксессор радиуса линии — это аксессор внутреннего радиуса области.

areaRadial.lineOuterRadius() Source

Возвращает новый генератор радиальной линии radial line generator, который имеет текущий аксессор определения defined accessor, кривую curve и контекст context. Аксессор угла линии — это аксессор начального угла области, а аксессор радиуса линии — это аксессор внешнего радиуса области.

Кривые

В то время как линии определяются как последовательность двумерных точек [x, y], а области аналогично определяются верхней и нижней линиями, остаётся задача преобразования этого дискретного представления в непрерывную фигуру: т.е., как интерполировать между точками. Для этой цели предоставляется множество кривых.

Кривые обычно не создаются и не используются напрямую, а передаются в line.curve и area.curve. Например:

var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); })
    .curve(d3.curveCatmullRom.alpha(0.5));

d3.curveBasis(context) Source

Создаёт кубическую базисную сплайн-кривую с использованием указанных опорных точек. Первая и последняя точки утроены, так что сплайн начинается в первой точке и заканчивается в последней, и является касательной к линии между первой и второй точками, и к линии между предпоследней и последней точками.

d3.curveBasisClosed(context) Source

Создаёт замкнутую кубическую базисную сплайн-кривую с использованием указанных опорных точек. Когда отрезок линии заканчивается, первые три опорные точки повторяются, образуя замкнутую петлю с непрерывностью C2.

d3.curveBasisOpen(context) Source

Создаёт кубическую базисную сплайн-кривую с использованием указанных опорных точек. В отличие от basis, первая и последняя точки не повторяются, и, таким образом, кривая обычно не пересекает эти точки.

d3.curveBundle(context) Source

Создаёт выпрямлённую кубическую базисную сплайн-кривую с использованием указанных опорных точек, при этом сплайн выпрямляется в соответствии с beta кривой, которая по умолчанию равна 0,85. Эта кривая обычно используется в увязке граней иерархических связей для устранения неоднозначностей соединений, как предложил Danny Holten в Hierarchical Edge Bundles: Visualization of Adjacency Relations in Hierarchical Data. Эта кривая не реализует curve.areaStart и curve.areaEnd; она предназначена для работы с d3.line, а не с d3.area.

bundle.beta(beta) Source

Возвращает кривую пучка с указанным beta в диапазоне [0, 1], представляющим силу пучка. Если beta равно нулю, генерируется прямая линия между первой и последней точкой; если beta равно единице, генерируется стандартная базисная сплайн-кривая. Например:

var line = d3.line().curve(d3.curveBundle.beta(0.5));

d3.curveCardinal(context) Source

Создаёт кубическую кардинальную сплайн-кривую с использованием указанных опорных точек, используя односторонние разности для первого и последнего отрезков. По умолчанию напряжение равно 0.

d3.curveCardinalClosed(context) Source

Создаёт замкнутую кубическую кардинальную сплайн-кривую с использованием указанных опорных точек. Когда отрезок линии заканчивается, первые три опорные точки повторяются, образуя замкнутую петлю. По умолчанию напряжение равно 0.

d3.curveCardinalOpen(context) Source

Создаёт кубическую кардинальную сплайн-кривую с использованием указанных опорных точек. В отличие от curveCardinal, односторонние разности не используются для первого и последнего отрезка, и, таким образом, кривая начинается со второй точки и заканчивается с предпоследней. По умолчанию напряжение равно 0.

cardinal.tension(tension) Source

Возвращает кардинальную кривую с указанным напряжением в диапазоне [0, 1]. Напряжение определяет длину касательных: напряжение 1 даёт все нулевые касательные, эквивалентно curveLinear; напряжение 0 производит равномерную кривую Catmull–Rom. Например:

var line = d3.line().curve(d3.curveCardinal.tension(0.5));

d3.curveCatmullRom(context) Source

Создаёт кубическую кривую Catmull–Rom с использованием указанных опорных точек и параметра alpha, который по умолчанию равен 0,5, как предложили Yuksel и др. в On the Parameterization of Catmull–Rom Curves, с использованием односторонних разностей для первого и последнего отрезков.

d3.curveCatmullRomClosed(context) Source

Создаёт замкнутую кубическую кривую Catmull–Rom с использованием указанных опорных точек и параметра alpha, который по умолчанию равен 0,5, как предложили Yuksel и др. Когда отрезок линии заканчивается, первые три опорные точки повторяются, образуя замкнутую петлю.

d3.curveCatmullRomOpen(context) Source

Создаёт кубическую кривую Catmull–Rom с использованием указанных опорных точек и параметра alpha, который по умолчанию равен 0,5, как предложили Yuksel и др. В отличие от curveCatmullRom, односторонние разности не используются для первого и последнего отрезка, и, таким образом, кривая начинается со второй точки и заканчивается с предпоследней.

catmullRom.alpha(alpha) Source

Возвращает кубическую кривую Catmull–Rom с заданным альфа в диапазоне [0, 1]. Если альфа равна нулю, генерирует равномерный сплайн, эквивалентный curveCardinal с напряжением ноль; если альфа равна единице, генерирует хордовую кривую; если альфа равна 0,5, генерирует центростремительный сплайн. Центростремительные сплайны рекомендуются для избежания самопересечений и перескоков. Например:

var line = d3.line().curve(d3.curveCatmullRom.alpha(0.5));

d3.curveLinear(context) Source

Создаёт полилинию через заданные точки.

d3.curveLinearClosed(context) Source

Создаёт замкнутую полилинию через заданные точки, повторяя первую точку, когда отрезок линии заканчивается.

d3.curveMonotoneX(context) Source

Создаёт кубический сплайн, который сохраняет монотонность по y, предполагая монотонность по x, как предложено Стеффеном в A simple method for monotonic interpolation in one dimension: «гладкая кривая с непрерывными производными первого порядка, которая проходит через любой заданный набор точек данных без ложных колебаний. Локальные экстремумы могут возникать только в точках сетки, где они заданы данными, но не между двумя соседними точками сетки».

d3.curveMonotoneY(context) Source

Создаёт кубический сплайн, который сохраняет монотонность по x, предполагая монотонность по y, как предложено Стеффеном в A simple method for monotonic interpolation in one dimension: «гладкая кривая с непрерывными производными первого порядка, которая проходит через любой заданный набор точек данных без ложных колебаний. Локальные экстремумы могут возникать только в точках сетки, где они заданы данными, но не между двумя соседними точками сетки».

d3.curveNatural(context) Source

Создаёт естественный кубический сплайн со второй производной, равной нулю на концах.

d3.curveStep(context) Source

Создаёт кусочно-постоянную функцию (функцию ступеньки), состоящую из чередующихся горизонтальных и вертикальных линий. Значение y изменяется в середине каждой пары соседних значений x.

d3.curveStepAfter(context) Source

Создаёт кусочно-постоянную функцию (функцию ступеньки), состоящую из чередующихся горизонтальных и вертикальных линий. Значение y изменяется после значения x.

d3.curveStepBefore(context) Source

Создаёт кусочно-постоянную функцию (функцию ступеньки), состоящую из чередующихся горизонтальных и вертикальных линий. Значение y изменяется до значения x.

Пользовательские кривые

Кривые обычно не используются напрямую, а передаются в line.curve и area.curve. Однако вы можете определить свою собственную реализацию кривой, если ни одна из встроенных кривых не удовлетворяет вашим потребностям, используя следующий интерфейс. Вы также можете использовать этот низкоуровневый интерфейс с типом встроенной кривой в качестве альтернативы генераторам линий и областей.

curve.areaStart() Source

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

curve.areaEnd() Source

Указывает конец текущего сегмента области.

curve.lineStart() Source

Указывает начало нового отрезка линии. За ним следуют ноль или более точек.

curve.lineEnd() Source

Указывает конец текущего отрезка линии.

curve.point(x, y) Source

Указывает новую точку в текущем отрезке линии с заданными значениями x и y.

Ссылки

Форма связи генерирует плавную кубическую кривую Безье от точки источника к точке назначения. Касательные кривой в начале и конце — либо вертикальные, горизонтальные, либо радиальные.

d3.linkVertical() Source

Возвращает новый генератор связей с вертикальными касательными. Например, чтобы визуализировать связи в диаграмме дерева, укоренённом в верхней части отображения, вы можете сказать:

var link = d3.linkVertical()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; });

d3.linkHorizontal() Source

Возвращает новый генератор связей с горизонтальными касательными. Например, чтобы визуализировать связи в диаграмме дерева, укоренённом в левой части отображения, вы можете сказать:

var link = d3.linkHorizontal()
    .x(function(d) { return d.y; })
    .y(function(d) { return d.x; });

link(arguments…) Source

Генерирует ссылку для заданных arguments. Arguments произвольные; они просто передаются в функции доступа к генератору ссылок вместе с this объектом. Например, со значениями по умолчанию ожидается объект:

link({
  source: [100, 100],
  target: [300, 300]
});

link.source([source]) Source

Если source указан, устанавливает функцию доступа к источнику, указанную функцию и возвращает этот генератор ссылок. Если source не указан, возвращает текущую функцию доступа к источнику, которая по умолчанию:

function source(d) {
  return d.source;
}

link.target([target]) Source

Если target указан, устанавливает функцию доступа к объекту назначения, указанную функцию и возвращает этот генератор ссылок. Если target не указан, возвращает текущую функцию доступа к объекту назначения, которая по умолчанию:

function target(d) {
  return d.target;
}

link.x([x]) Source

Если x указан, устанавливает x-функцию доступа к заданной функции или числу и возвращает этот генератор ссылок. Если x не указан, возвращает текущую x-функцию доступа, которая по умолчанию:

function x(d) {
  return d[0];
}

link.y([y]) Source

Если y указан, устанавливает y-функцию доступа к заданной функции или числу и возвращает этот генератор ссылок. Если y не указан, возвращает текущую y-функцию доступа, которая по умолчанию:

function y(d) {
  return d[1];
}

link.context([context]) Source

Если context указан, устанавливает контекст и возвращает этот генератор ссылок. Если context не указан, возвращает текущий контекст, который по умолчанию равен null. Если контекст не null, то сгенерированная ссылка отображается в этом контексте в виде последовательности вызовов методов пути. В противном случае возвращается строка данных пути SVG, представляющая сгенерированную ссылку. См. также d3-path.

d3.linkRadial() Source

Возвращает новый генератор связей с радиальными касательными. Например, чтобы визуализировать связи в диаграмме дерева, укоренённом в центре отображения, вы можете сказать:

var link = d3.linkRadial()
    .angle(function(d) { return d.x; })
    .radius(function(d) { return d.y; });

linkRadial.angle([angle]) Source

Эквивалентно link.x, за исключением того, что функция доступа возвращает угол в радианах, причём 0 находится в точке -y (12 часов).

linkRadial.radius([radius]) Source

Эквивалентно link.y, за исключением того, что функция доступа возвращает радиус: расстояние от начала координат ⟨0,0⟩.

Символы

Символы предоставляют категориальное кодирование формы, как это обычно используется в диаграммах рассеяния. Символы всегда центрированы в ⟨0,0⟩; используйте преобразование (см.: SVG, Canvas), чтобы переместить символ в другое положение.

d3.symbol() Источник

Создает новый генератор символов со значениями по умолчанию.

symbol(arguments…) Источник

Генерирует символ для заданных arguments. Arguments произвольны; они просто передаются в функции доступа генератора символов вместе с объектом this. Например, со значениями по умолчанию для получения круга с площадью 64 квадратных пикселя не нужны аргументы. Если у генератора символов есть контекст, то символ отрисовывается в этом контексте как последовательность вызовов метода path method, и эта функция возвращает пустое значение. В противном случае возвращается строка данных path data.

symbol.type([type]) Источник

Если type задан, устанавливает тип символа на указанную функцию или тип символа и возвращает этот генератор линий. Если type не задан, возвращает текущую функцию доступа к типу символа, которая по умолчанию:

function type() {
  return circle;
}

См. символы для набора встроенных типов символов. Для реализации пользовательского типа символа передайте объект, который реализует symbolType.draw.

symbol.size([size]) Источник

Если size задан, устанавливает размер на указанную функцию или число и возвращает этот генератор символов. Если size не задан, возвращает текущую функцию доступа к размеру, которая по умолчанию:

function size() {
  return 64;
}

Указание размера в виде функции полезно для построения диаграммы рассеяния с кодированием размера. Если вы хотите масштабировать символ для вписывания в заданную область, а не по площади, попробуйте getBBox SVG.

symbol.context([context]) Источник

Если context задан, устанавливает контекст и возвращает этот генератор символов. Если context не задан, возвращает текущий контекст, который по умолчанию равен null. Если контекст не null, то сгенерированный символ отрисовывается в этом контексте как последовательность вызовов метода path method. В противном случае возвращается строка path data, представляющая сгенерированный символ.

d3.symbols

Массив, содержащий набор всех встроенных типов символов: circle, cross, diamond, square, star, triangle и wye. Полезно для построения области значений порядкового масштаба, если вы хотите использовать кодирование формы для категориальных данных.

d3.symbolCircle Источник

Тип кругового символа.

d3.symbolCross Источник

Тип греческого креста со сторонами одинаковой длины.

d3.symbolDiamond Источник

Тип ромбового символа.

d3.symbolSquare Источник

Тип квадратного символа.

d3.symbolStar Источник

Тип пятилучевой звезды (пентаграммы).

d3.symbolTriangle Источник

Тип треугольного символа, направленного вверх.

d3.symbolWye Источник

Тип символа Y-образной формы.

d3.pointRadial(angle, radius) Источник

Возвращает точку [x, y] для заданного angle в радианах, где 0 находится в точке -y (12 часов), а положительные углы следуют по часовой стрелке, и заданного radius.

Типы пользовательских символов

Типы символов обычно не используются напрямую, а передаются в symbol.type. Однако вы можете определить собственную реализацию типа символа, если ни один из встроенных типов не удовлетворяет вашим потребностям, используя следующий интерфейс. Вы также можете использовать этот низкоуровневый интерфейс со встроенным типом символа как альтернативу генератору символов.

symbolType.draw(context, size)

Отображает этот тип символа в указанном context с заданным size в квадратных пикселях. Context реализует интерфейс CanvasPathMethods. (Обратите внимание, что это подмножество интерфейса CanvasRenderingContext2D!)

Стопки

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

Сложенные диаграммы могут показывать общую и по каждой категории одновременно, однако сравнивать по категориям обычно сложнее, так как выровнен только нижний слой стопки. Поэтому тщательно выбирайте порядок стопки и рассмотрите streamgraph. (См. также группированные диаграммы.)

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

d3.stack() Источник

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

stack(data[, arguments…]) Источник

Генерирует стопку для заданного массива data, возвращая массив, представляющий каждый ряд. Любые дополнительные arguments произвольны; они просто передаются функциям доступа вместе с объектом this.

Ряды определяются функцией доступа keys accessor; каждый ряд i в возвращаемом массиве соответствует i-му ключу. Каждый ряд — это массив точек, где каждая точка j соответствует j-му элементу в входных данных data. Наконец, каждая точка представлена массивом [y0, y1], где y0 — нижнее значение (базовая линия), а y1 — верхнее значение (линия верха); разница между y0 и y1 соответствует вычисленному значению value для этой точки. Ключ для каждого ряда доступен как series.key, а индекс как series.index. Элемент входных данных для каждой точки доступен как point.data.

Например, рассмотрим следующую таблицу, представляющую ежемесячные продажи фруктов:

Это можно представить в JavaScript как массив объектов:

var data = [
  {month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400},
  {month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400},
  {month: new Date(2015, 2, 1), apples:  640, bananas:  960, cherries: 640, dates: 400},
  {month: new Date(2015, 3, 1), apples:  320, bananas:  480, cherries: 640, dates: 400}
];

Чтобы создать стопку для этих данных:

var stack = d3.stack()
    .keys(["apples", "bananas", "cherries", "dates"])
    .order(d3.stackOrderNone)
    .offset(d3.stackOffsetNone);

var series = stack(data);

Полученный массив имеет один элемент на ряд. Каждый ряд имеет одну точку на месяц, и каждая точка имеет нижнее и верхнее значение, определяющие базу и верхнюю линию:

[
  [[   0, 3840], [   0, 1600], [   0,  640], [   0,  320]], // apples
  [[3840, 5760], [1600, 3040], [ 640, 1600], [ 320,  800]], // bananas
  [[5760, 6720], [3040, 4000], [1600, 2240], [ 800, 1440]], // cherries
  [[6720, 7120], [4000, 4400], [2240, 2640], [1440, 1840]], // dates
]

Затем каждый ряд обычно передается генератору площади для отрисовки диаграммы площади или используется для построения прямоугольников для гистограммы.

stack.keys([keys]) Источник

Если keys задан, устанавливает функцию доступа к ключам на указанную функцию или массив и возвращает этот генератор стопок. Если keys не задан, возвращает текущую функцию доступа к ключам, которая по умолчанию является пустым массивом. Для каждого ключа генерируется ряд (слой). Ключи обычно являются строками, но могут быть произвольными значениями. Ключ ряда передается функции доступа value accessor вместе с каждой точкой данных для вычисления значения точки.

stack.value([value]) Источник

Если value задан, устанавливает функцию доступа к значению на указанную функцию или число и возвращает этот генератор стопок. Если value не задан, возвращает текущую функцию доступа к значению, которая по умолчанию:

function value(d, key) {
  return d[key];
}

Таким образом, генератор стопок по умолчанию предполагает, что входные данные — это массив объектов, каждый из которых имеет именованные свойства с числовыми значениями; см. stack для примера.

stack.order([order]) Источник

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

Если order является функцией, она получает сгенерированный массив series и должна вернуть массив числовых индексов, представляющих порядок стека. Например, порядок по умолчанию определяется как:

function orderNone(series) {
  var n = series.length, o = new Array(n);
  while (--n >= 0) o[n] = n;
  return o;
}

Порядок стека вычисляется до смещения; таким образом, минимальное значение для всех точек равно нулю в момент вычисления порядка. Атрибут index для каждого ряда также устанавливается только после вычисления порядка.

stack.offset([offset]) Source

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

Если offset является функцией, она получает сгенерированный массив series и массив индексов порядка. Функция смещения отвечает за обновление нижних и верхних значений в массиве series для размещения стека. Например, смещение по умолчанию определяется как:

function offsetNone(series, order) {
  if (!((n = series.length) > 1)) return;
  for (var i = 1, s0, s1 = series[order[0]], n, m = s1.length; i < n; ++i) {
    s0 = s1, s1 = series[order[i]];
    for (var j = 0; j < m; ++j) {
      s1[j][1] += s1[j][0] = s0[j][1];
    }
  }
}

Порядки стека

Порядки стека обычно не используются напрямую, а передаются в stack.order.

d3.stackOrderAscending(series) Source

Возвращает порядок рядов таким образом, что наименьший ряд (согласно сумме значений) находится внизу.

d3.stackOrderDescending(series) Source

Возвращает порядок рядов таким образом, что наибольший ряд (согласно сумме значений) находится внизу.

d3.stackOrderInsideOut(series) Source

Возвращает порядок рядов, в котором более крупные ряды (согласно сумме значений) находятся внутри, а меньшие — снаружи. Этот порядок рекомендуется для стримграфиков в сочетании с смещением wiggle. Дополнительная информация в статье «Stacked Graphs—Geometry & Aesthetics» Брайона и Ваттенберга по адресу http://leebyron.com/streamgraph/.

d3.stackOrderNone(series) Source

Возвращает заданный порядок рядов [0, 1, … n - 1], где n — количество элементов в series. Таким образом, порядок стека задаётся аксессором ключа .

d3.stackOrderReverse(series) Source

Возвращает обратный порядок заданных рядов [n - 1, n - 2, … 0], где n — количество элементов в series. Таким образом, порядок стека задаётся обратным аксессором ключа .

Смещения стека

Смещения стека обычно не используются напрямую, а передаются в stack.offset.

d3.stackOffsetExpand(series, order) Source

Применяет нулевую базу и нормализует значения для каждой точки таким образом, что верхняя линия всегда равна единице.

d3.stackOffsetDiverging(series, order) Source

Положительные значения накладываются сверху от нуля, а отрицательные — ниже нуля.

d3.stackOffsetNone(series, order) Source

Применяет нулевую базу.

d3.stackOffsetSilhouette(series, order) Source

Сдвигает базу вниз таким образом, что центр стримграфика всегда находится на нуле.

d3.stackOffsetWiggle(series, order) Source

Сдвигает базу так, чтобы минимизировать взвешенную мерцание слоёв. Это смещение рекомендуется для стримграфиков в сочетании с порядком внутри-снаружи. Дополнительная информация в статье «Stacked Graphs—Geometry & Aesthetics» Брайона и Ваттенберга по адресу http://leebyron.com/streamgraph/.