d3-shape

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

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

const line = d3.line()
    .x(d => x(d.date))
    .y(d => y(d.value));

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

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

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

line.context(context)(data);

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

Установка

Если вы используете npm, npm install d3-shape. Вы также можете загрузить последнюю версию на GitHub. Для обычного HTML в современных браузерах импортируйте d3-shape из jsDelivr:

<script type="module">

import {line} from "https://cdn.jsdelivr.net/npm/d3-shape@3/+esm";

const l = line();

</script>

Для устаревших сред вы можете загрузить UMD-пакет d3-shape; экспортируется глобальная переменная d3:

<script src="https://cdn.jsdelivr.net/npm/d3-path@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-shape@3"></script>
<script>

const l = d3.line();

</script>

Справочник по API

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

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

Дуги

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

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

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

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

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

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

const arc = d3.arc();

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

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

const 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] центральной линии дуги, которая была бы сгенерирована заданными аргументами. Аргументы произвольные; они просто передаются в функции аксессоров генератора дуг вместе с 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]) · Source

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

arc.context([context]) · Source

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

arc.digits([digits]) · Source

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

Сектора

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

d3.pie() · Source

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

pie(data[, arguments…]) · Source

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

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

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

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

const data = [1, 1, 2, 3, 5, 8, 13, 21];
const 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]) · Source

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

function value(d) {
  return d;
}

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

const 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"}
];

const arcs = d3.pie()
    .value(d => d.number)
    (data);

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

const arcs = d3.pie()(data.map(d => d.number));

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

pie.sort([compare]) · Source

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

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

pie.sort((a, b) => a.name.localeCompare(b.name));

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

pie.sortValues([compare]) · Source

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

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

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

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

pie.sortValues((a, b) => a - b);

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

pie.startAngle([angle]) · Source

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

function startAngle() {
  return 0;
}

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

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

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

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

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

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

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

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

function padAngle() {
  return 0;
}

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

Линии

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

d3.line([x][, y]) · Источник, Примеры

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

line(data) · Источник, Примеры

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

line.x([x]) · Источник, Примеры

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

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

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

const 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},
  …
];

const line = d3.line()
    .x(d => x(d.date))
    .y(d => y(d.value));

line.y([y]) · Источник, Примеры

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

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

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

line.defined([defined]) · Источник, Примеры

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

function defined() {
  return true;
}

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

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

line.curve([curve]) · Источник, Примеры

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

line.context([context]) · Источник, Примеры

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

line.digits([digits]) · Источник

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

d3.lineRadial() · Источник, Примеры

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

lineRadial(data) · Источник, Примеры

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

lineRadial.angle([angle]) · Источник, Примеры

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

lineRadial.radius([radius]) · Источник, Примеры

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

lineRadial.defined([defined])

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

lineRadial.curve([curve]) · Источник, Примеры

Эквивалентно 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([x][, y0][, y1]) · Источник

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

area(data) · Источник

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

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 — это линейная шкала:

const 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},
  …
];

const area = d3.area()
    .x(d => x(d.date))
    .y1(d => 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];
}

Также разрешен нулевой обработчик, указывающий на то, что ранее вычисленное значение 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.digits([digits]) · Source

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

area.lineX0() · Source
area.lineY0() · Source

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

area.lineX1() · Source

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

area.lineY1() · Source

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

d3.areaRadial() · Source

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

areaRadial(data)

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

areaRadial.angle([angle]) · Source

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

areaRadial.startAngle([angle]) · Source

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

areaRadial.endAngle([angle]) · Source

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

areaRadial.radius([radius]) · Source

Эквивалентно 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

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

areaRadial.lineEndAngle() · Source

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

areaRadial.lineOuterRadius() · Source

Возвращает новый генератор радиальной линии, у которого текущие обработчик определения, кривая и контекст этого генератора радиальных областей. Функция обработчика угла линии — это функция обработчика начального угла этой области, а функция обработчика радиуса линии — это функция обработчика внешнего радиуса этой области.

Кривые

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

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

const line = d3.line(d => d.date, d => d.value)
    .curve(d3.curveCatmullRom.alpha(0.5));

d3.curveBasis(context) · Source

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

d3.curveBasisClosed(context) · Source

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

d3.curveBasisOpen(context) · Source

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

d3.curveBumpX(context) · Source

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

d3.curveBumpY(context) · Source

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

d3.curveBundle(context) · Source

Создаёт выпрямлённую кубическую базисную сплайн-кривую с использованием указанных контрольных точек, при этом сплайн выпрямляется в соответствии с beta кривой, которая по умолчанию равна 0,85. Эта кривая обычно используется в иерархическом связывании рёбер для разграничения соединений, как было предложено Дэнни Холтен в Иерархические пучки рёбер: визуализация отношений смежности в иерархических данных. Эта кривая не реализует curve.areaStart и curve.areaEnd; она предназначена для работы с d3.line, а не с d3.area.

bundle.beta(beta) · Source

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

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

d3.curveCardinal(context) · Source

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

d3.curveCardinalClosed(context) · Source

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

d3.curveCardinalOpen(context) · Source

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

cardinal.tension(tension) · Source

Возвращает кардинальную кривую с указанным tension в диапазоне [0, 1]. Tension определяет длину касательных: tension равное единице даёт все нулевые касательные, эквивалентные curveLinear; tension равное нулю производит равномерный сплайн Катмулла-Рома. Например:

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

d3.curveCatmullRom(context) · Source

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

d3.curveCatmullRomClosed(context) · Source

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

d3.curveCatmullRomOpen(context) · Source

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

catmullRom.alpha(alpha) · Source

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

const 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() · Исходный код

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

curve.lineStart() · Исходный код

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

curve.lineEnd() · Исходный код

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

curve.point(x, y) · Исходный код

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

Ссылки

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

d3.link(curve) · Исходный код

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

const link = d3.link(d3.curveBumpY)
    .x(d => d.x)
    .y(d => d.y);

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

Краткая запись для d3.link с d3.curveBumpY; подходит для визуализации связей в диаграмме дерева, укоренённого в верхней части экрана. Эквивалентно:

const link = d3.link(d3.curveBumpY);

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

Краткая запись для d3.link с d3.curveBumpX; подходит для визуализации связей в диаграмме дерева, укоренённого слева от экрана. Эквивалентно:

const link = d3.link(d3.curveBumpX);

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

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

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

link.source([source]) · Исходный код

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

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

link.target([target]) · Исходный код

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

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

link.x([x]) · Исходный код

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

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

link.y([y]) · Исходный код

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

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

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

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

link.digits([digits]) · Исходный код

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

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

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

const link = d3.linkRadial()
    .angle(d => d.x)
    .radius(d => d.y);

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

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

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

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

Символы

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

d3.symbol([type][, size]) · Исходный код, Примеры

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

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

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

symbol.type([type]) · Исходный код

Если type указан, устанавливает тип символа в указанную функцию или тип символа и возвращает этот генератор символов. Если type является функцией, аргументы генератора символов и this передаются через. (См. selection.attr, если вы используете d3-selection.) Если type не указан, возвращает текущую функцию доступа к типу символа, которая по умолчанию:

function type() {
  return circle;
}

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

symbol.size([size]) · Исходный код

Если size указан, устанавливает размер в указанную функцию или число и возвращает этот генератор символов. Если size является функцией, аргументы генератора символов и this передаются через. (См. selection.attr, если вы используете d3-selection.) Если size не указан, возвращает текущую функцию доступа к размеру, которая по умолчанию:

function size() {
  return 64;
}

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

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

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

symbol.digits([digits]) · Source

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

d3.symbolsFill · Source

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

d3.symbolsStroke · Source

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

d3.symbolAsterisk · Source

Тип символа звездочка; предназначен для обводки.

d3.symbolCircle · Source

Тип символа круг; предназначен для заполнения или обводки.

d3.symbolCross · Source

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

d3.symbolDiamond · Source

Тип символа ромб; предназначен для заполнения.

d3.symbolDiamond2 · Source

Тип символа повернутый квадрат; предназначен для обводки.

d3.symbolPlus · Source

Тип символа плюс; предназначен для обводки.

d3.symbolSquare · Source

Тип символа квадрат; предназначен для заполнения.

d3.symbolSquare2 · Source

Тип символа квадрат2; предназначен для обводки.

d3.symbolStar · Source

Тип символа пятиконечная звезда (пентаграмма); предназначена для заполнения.

d3.symbolTriangle · Source

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

d3.symbolTriangle2 · Source

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

d3.symbolWye · Source

Тип символа форма Y; предназначен для заполнения.

d3.symbolTimes · Source

Тип символа форма X; предназначен для обводки.

d3.pointRadial(angle, radius) · Source, Примеры

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

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

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

symbolType.draw(context, size)

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

Стопки

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

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

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

d3.stack() · Source

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

stack(data[, arguments…]) · Source

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

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

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

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

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

Для создания стопки для этих данных:

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

const 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]], // durians
]

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

stack.keys([keys]) · Source

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

stack.value([value]) · Source

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

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

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

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

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

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

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

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

стек.offset([offset]) · Источник

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

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

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

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

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

d3.stackOrderAppearance(series) · Источник

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

d3.stackOrderAscending(series) · Источник

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

d3.stackOrderDescending(series) · Источник

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

d3.stackOrderInsideOut(series) · Источник

Возвращает порядок рядов таким образом, что самые ранние ряды (согласно максимальному значению) находятся внутри, а более поздние — снаружи. Этот порядок рекомендуется для потоковых графиков в сочетании со смещением wiggle. См. Stacked Graphs—Geometry & Aesthetics Брайона и Ваттенберга для получения дополнительной информации.

d3.stackOrderNone(series) · Источник

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

d3.stackOrderReverse(series) · Источник

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

Смещения стеков

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

d3.stackOffsetExpand(series, order) · Источник

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

d3.stackOffsetDiverging(series, order) · Источник

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

d3.stackOffsetNone(series, order) · Источник

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

d3.stackOffsetSilhouette(series, order) · Источник

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

d3.stackOffsetWiggle(series, order) · Источник

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