d3-chord

Визуализируйте отношения или поток сети с помощью эстетически приятной круговой компоновки.

Chord Diagram

Установка

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

<script type="module">

import {chord} from "https://cdn.skypack.dev/d3-chord@3";

const c = chord();

</script>

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

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

const chord = d3.chord();

</script>

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

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

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

chord(matrix) · Источник

Вычисляет компоновку хорд для заданной квадратной матрицы размера n×n, где матрица представляет направленный поток между сетью (полным ориентированным графом) из n узлов. Заданная матрица должна быть массивом длиной n, где каждый элемент matrix[i] является массивом из n чисел, где каждый matrix[i][j] представляет поток от i-го узла в сети к j-му узлу. Каждое число matrix[i][j] должно быть неотрицательным, хотя оно может быть нулевым, если нет потока от узла i к узлу j. Из примера Circos tableviewer:

const matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];

Возвращаемое значение chord(matrix) — массив хорд, где каждая хорда представляет совокупный двусторонний поток между двумя узлами i и j (где i может быть равно j) и является объектом со следующими свойствами:

source — исходная подгруппа
target — целевая подгруппа

Каждая исходная и целевая подгруппа также является объектом со следующими свойствами:

startAngle — начальный угол в радианах
endAngle — конечный угол в радианах
value — значение потока matrix[i][j]
index — индекс узла i

Хорды обычно передаются в d3.ribbon для отображения отношений в сети. Возвращаемый массив содержит только объекты хорд, для которых значение matrix[i][j] или matrix[j][i] не равно нулю. Кроме того, возвращаемый массив содержит только уникальные хорды: данная хорда ij представляет двусторонний поток от i к j и от j к i и не содержит дублирующей хорды ji; i и j выбираются так, чтобы исходная хорда всегда представляла большее из matrix[i][j] и matrix[j][i].

Массив chords также определяет вторичный массив длиной n, chords.groups, где каждая группа представляет совокупный отток для узла i, соответствующий элементам matrix[i][0 … n - 1], и является объектом со следующими свойствами:

startAngle — начальный угол в радианах
endAngle — конечный угол в радианах
value — общее значение исходящего потока для узла i
index — индекс узла i

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

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

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

chord.sortGroups([compare]) · Источник

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

chord.sortSubgroups([compare]) · Источник

Если compare указан, устанавливает компаратор подгрупп на указанную функцию или null и возвращает эту компоновку хорд. Если compare не указан, возвращает текущий компаратор подгрупп, который по умолчанию равен null. Если компаратор подгрупп не равен null, он используется для сортировки подгрупп, соответствующих matrix[i][0 … n - 1], для заданной группы i по их общему оттоку. См. также d3.ascending и d3.descending.

chord.sortChords([compare]) · Источник

Если compare указан, устанавливает компаратор хорд на указанную функцию или null и возвращает эту компоновку хорд. Если compare не указан, возвращает текущий компаратор хорд, который по умолчанию равен null. Если компаратор хорд не равен null, он используется для сортировки хорд по их совокупному потоку; это влияет только на порядок хорд по z. См. также d3.ascending и d3.descending.

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

Компоновка хорд для направленных потоков. Хорда от i к j генерируется только из значения в matrix[i][j].

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

Транспонированная компоновка хорд. Полезно для выделения исходящих (а не входящих) потоков.

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

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

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

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

const ribbon = d3.ribbon();

ribbon({
  source: {startAngle: 0.7524114, endAngle: 1.1212972, radius: 240},
  target: {startAngle: 1.8617078, endAngle: 1.9842927, radius: 240}
}); // "M164.0162810494058,-175.21032946354026A240,240,0,0,1,216.1595644740915,-104.28347273835429Q0,0,229.9158815306728,68.8381247563705A240,240,0,0,1,219.77316791012538,96.43523560788266Q0,0,164.0162810494058,-175.21032946354026Z"

Или аналогично, если радиус вместо этого определён как константа:

const ribbon = d3.ribbon()
    .radius(240);

ribbon({
  source: {startAngle: 0.7524114, endAngle: 1.1212972},
  target: {startAngle: 1.8617078, endAngle: 1.9842927}
}); // "M164.0162810494058,-175.21032946354026A240,240,0,0,1,216.1595644740915,-104.28347273835429Q0,0,229.9158815306728,68.8381247563705A240,240,0,0,1,219.77316791012538,96.43523560788266Q0,0,164.0162810494058,-175.21032946354026Z"

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

ribbon.source([source]) · Источник

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

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

ribbon.target([target]) · Источник

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

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

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

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

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

ribbon.sourceRadius([radius]) · Источник

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

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

ribbon.targetRadius([radius]) · Источник

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

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

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

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

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

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

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

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

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

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

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

ribbon.padAngle([angle]) · Source

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

function padAngle() {
  return 0;
}

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

ribbon.context([context]) · Source

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

d3.ribbonArrow() · Source

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

ribbonArrow.headRadius([radius]) · Source

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

function headRadius() {
  return 10;
}