d3-chord

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

Chord Diagram

Установка

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

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

var chord = d3.chord();

</script>

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

Справочник по 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
subindex — индекс узла j

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

Массив 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.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.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.context([context]) Исходный код

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