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

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

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

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

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

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