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:

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

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

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"

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

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

arc.padRadius([radius]) Исходный код

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

arc.context([context]) Исходный код

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

Сектора

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

d3.pie() Исходный код

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

pie(data[, arguments…]) Исходный код

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

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

Эта структура предназначена для работы с генератором дуг и его стандартными startAngle, endAngle и padAngle accessors. Угловые единицы произвольные, но если вы планируете использовать генератор секторов совместно с генератором дуг, вам следует указывать углы в радианах, с 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 указан, устанавливает accessor значения до указанной функции или числа и возвращает этот генератор секторов. Если value не указан, возвращает текущий accessor значения, который по умолчанию:

function value(d) {
  return d;
}

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

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; }));

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

pie.sort([compare]) Исходный код

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

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

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

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

pie.sortValues([compare]) Исходный код

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

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

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

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

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

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

pie.startAngle([angle]) Исходный код

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

function startAngle() {
  return 0;
}

Здесь начальный угол означает общий начальный угол круговой диаграммы, т. е., начальный угол первой дуги. Функция accessor начального угла вызывается один раз, передавая те же аргументы и this контекст, что и генератор секторов. Единицы angle произвольные, но если вы планируете использовать генератор секторов совместно с генератором дуг, вам следует указывать угол в радианах, с 0 на -y (12 часов) и положительными углами по часовой стрелке.

pie.endAngle([angle]) Исходный код

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

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

Здесь конечный угол означает общий конечный угол круговой диаграммы, т. е., конечный угол последней дуги. Функция accessor конечного угла вызывается один раз, передавая те же аргументы и this контекст, что и генератор секторов. Единицы angle произвольные, но если вы планируете использовать генератор секторов совместно с генератором дуг, вам следует указывать угол в радианах, с 0 на -y (12 часов) и положительными углами по часовой стрелке.

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

pie.padAngle([angle]) Source

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

function padAngle() {
  return 0;
}

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

Линии

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

d3.line() Source

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

line(data) Source

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

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

Генерирует область для заданного массива данных. В зависимости от связанной с этим генератором области кривой, заданные входные данные могут потребоваться отсортировать по значению 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() Источник

Возвращает новый генератор линии, который имеет текущий обработчик определения генератора области, кривую и контекст. Обработчик x линии — это обработчик x0 области, а обработчик y линии — это обработчик y0 области.

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

Возвращает новый генератор линии, который имеет текущий обработчик определения генератора области, кривую и контекст. Обработчик x линии — это обработчик x1 области, а обработчик y линии — это обработчик y0 области.

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

Возвращает новый генератор линии, который имеет текущий обработчик определения генератора области, кривую и контекст. Обработчик 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]) Исходный код

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

areaRadial.outerRadius([radius]) Исходный код

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

areaRadial.defined([defined])

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

areaRadial.curve([curve]) Исходный код

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

areaRadial.context([context])

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

areaRadial.lineStartAngle() Исходный код
areaRadial.lineInnerRadius() Исходный код

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

areaRadial.lineEndAngle() Исходный код

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

areaRadial.lineOuterRadius() Исходный код

Возвращает новый генератор радиальной линии, который имеет текущий аксессор определений, кривую и контекст этого генератора радиальной области. Аксессор угла линии — это аксессор начального угла этой области, а аксессор радиуса линии — это аксессор внешнего радиуса этой области.

Кривые

Хотя линии определяются как последовательность двухмерных точек [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) Исходный код

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

d3.curveBasisClosed(context) Исходный код

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

d3.curveBasisOpen(context) Исходный код

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

d3.curveBundle(context) Исходный код

Производит выпрямлённую кубическую базисную сплайн-кривую с использованием указанных контрольных точек, при этом сплайн выпрямляется в соответствии с 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) Исходный код

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

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

d3.curveCardinal(context) Исходный код

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

d3.curveCardinalClosed(context) Исходный код

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

d3.curveCardinalOpen(context) Исходный код

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

cardinal.tension(tension) Исходный код

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

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

d3.curveCatmullRom(context) Исходный код

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

d3.curveCatmullRomClosed(context) Исходный код

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

d3.curveCatmullRomOpen(context) Source

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

catmullRom.alpha(alpha) Source

Возвращает кубическую кривую Catmull–Rom с заданным значением alpha в диапазоне [0, 1]. Если alpha равно нулю, генерируется равномерный сплайн, эквивалентный curveCardinal с напряжением ноль; если alpha равно единице, генерируется хордовый сплайн; если alpha равно 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, то сгенерированная ссылка отрисовывается в этом контексте как последовательность вызовов методов пути. В противном случае возвращается строка данных пути, представляющая сгенерированную ссылку. См. также d3-path.

d3.linkRadial() Source

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

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

linkRadial.angle([angle]) Исходный код

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

linkRadial.radius([radius]) Исходный код

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

Символы

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

d3.symbol() Исходный код

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

symbol(arguments…) Исходный код

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

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

d3.symbols

Массив, содержащий набор всех встроенных типов символов: круг, крест, ромб, квадрат, звезда, треугольник и Y-образный. Полезно для построения диапазона порядкового масштаба, если вы хотите использовать кодирование формы для категориальных данных.

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!)

Столбцы

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

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

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

d3.stack() Исходный код

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

stack(data[, arguments…]) Исходный код

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

Серии определяются функцией доступа к ключам; каждая серия i в возвращаемом массиве соответствует i-ому ключу. Каждая серия — массив точек, где каждая точка j соответствует j-ому элементу в входных данных data. Наконец, каждая точка представлена как массив [y0, y1], где y0 — нижнее значение (базовая линия), а y1 — верхнее значение (верхняя линия); разность между y0 и y1 соответствует вычисленному значению значению для этой точки. Ключ для каждой серии доступен как 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 не указан, возвращает текущий обработчик ключей, который по умолчанию является пустым массивом. Для каждого ключа генерируется ряд (слой). Ключи обычно являются строками, но могут быть произвольными значениями. Ключ ряда передаётся обработчику значений, вместе с каждой точкой данных, чтобы вычислить значение точки.

stack.value([value]) Source

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

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

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

stack.order([order]) Source

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

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

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

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

stack.offset([offset]) Source

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

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

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 Брайана и Уоттенберга для получения дополнительной информации.

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 Брайона и Уоттенберга для получения дополнительной информации.