d3-chord

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

Chord Diagram

Установка

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

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

var 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:

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

См. https://observablehq.com/@d3/directed-chord-diagram.

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

…

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

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

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

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

var 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"

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

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

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

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

Если 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;
}