d3-hierarchy

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

Этот модуль реализует несколько популярных методов визуализации иерархических данных:

Диаграммы узлы-связи отображают топологию, используя дискретные метки для узлов и связей, такие как круг для каждого узла и линия, соединяющая каждого родителя и ребенка. «Чистое» дерево замечательно компактно, а дендрограмма размещает листья на одном уровне. (Они имеют как полярные, так и декартовы формы.) Вложенные деревья полезны для интерактивного просмотра.

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

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

Хорошая визуализация иерархии способствует быстрому выводу на нескольких уровнях: микронаблюдения за отдельными элементами и макронаблюдения за большими группами.

Установка

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

<script type="module">

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

const tree = treemap();

</script>

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

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

const tree = d3.treemap();

</script>

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

Иерархия (Стратифицирование)
Кластеризация
Дерево
Деревовидная карта (Разбиение деревавидной карты)
Разбиение
Укладка

Иерархия

Прежде чем вы сможете вычислить иерархическую компоновку, вам нужен корневой узел. Если ваши данные уже находятся в иерархическом формате, например, JSON, вы можете передать их напрямую в d3.hierarchy; в противном случае вы можете перегруппировать табличные данные, такие как CSV, в иерархию с помощью d3.stratify.

d3.hierarchy(data[, children]) · Исходный код, Примеры

Создаёт корневой узел из заданных иерархических данных. Указанные данные должны быть объектом, представляющим корневой узел. Например:

{
  "name": "Eve",
  "children": [
    {
      "name": "Cain"
    },
    {
      "name": "Seth",
      "children": [
        {
          "name": "Enos"
        },
        {
          "name": "Noam"
        }
      ]
    },
    {
      "name": "Abel"
    },
    {
      "name": "Awan",
      "children": [
        {
          "name": "Enoch"
        }
      ]
    },
    {
      "name": "Azura"
    }
  ]
}

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

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

Если data является картой, она неявно преобразуется в запись [undefined, data], и функция доступа к детям по умолчанию:

function children(d) {
  return Array.isArray(d) ? d[1] : null;
}

Это позволяет передавать результат d3.group или d3.rollup в d3.hierarchy.

Возвращаемый узел и каждый его потомок имеют следующие свойства:

node.data - связанные данные, как указано в конструкторе.
node.depth - ноль для корневого узла и увеличивается на единицу для каждого последующего поколения потомков.
node.height - ноль для листовых узлов, и наибольшее расстояние от любого листового потомка до внутренних узлов.
node.parent - родительский узел или null для корневого узла.
node.children - массив дочерних узлов, если таковые имеются; undefined для листовых узлов.
node.value - суммарное значение узла и его потомков; необязательно, см. node.sum и node.count.

Этот метод также может использоваться для проверки, является ли узел instanceof d3.hierarchy, и для расширения прототипа узла.

node.ancestors() · Исходный код, Примеры

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

node.descendants() · Исходный код, Примеры

Возвращает массив дочерних узлов, начиная с данного узла, затем с каждым ребёнком в топологическом порядке.

node.leaves() · Исходный код, Примеры

Возвращает массив листовых узлов в порядке обхода; листовые узлы — это узлы без потомков.

node.find(filter) · Исходный код

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

node.path(target) · Исходный код, Примеры

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

node.links() · Исходный код, Примеры

Возвращает массив связей для этого узла и его потомков, где каждая связь — это объект, определяющий свойства source и target. Источник каждой связи — родительский узел, а цель — дочерний узел.

node.sum(value) · Исходный код, Примеры

Вычисляет указанную функцию value для этого узла и каждого потомка в постзадачном обходе и возвращает этот узел. Свойство node.value каждого узла устанавливается в числовое значение, возвращённое заданной функцией, плюс объединённое значение всех потомков. Функция получает данные узла и должна возвращать неотрицательное число. Функция доступа к value вычисляется для узла и каждого потомка, включая внутренние узлы; если вы хотите, чтобы внутреннее значение имели только листовые узлы, верните ноль для любого узла с потомками. Например, как альтернатива node.count:

root.sum(function(d) { return d.value ? 1 : 0; });

Вы должны вызвать node.sum или node.count перед вызовом иерархической компоновки, которая требует node.value, например, d3.treemap. Поскольку API поддерживает цепочку вызовов методов, вы можете вызвать node.sum и node.sort перед вычислением компоновки, а затем сгенерировать массив всех потомков следующим образом:

var treemap = d3.treemap()
    .size([width, height])
    .padding(2);

var nodes = treemap(root
    .sum(function(d) { return d.value; })
    .sort(function(a, b) { return b.height - a.height || b.value - a.value; }))
  .descendants();

В этом примере предполагается, что данные узла имеют поле value.

node.count() · Исходный код, Примеры

Вычисляет количество листьев под этим узлом и присваивает его node.value, и аналогично для каждого потомка узла. Если этот узел является листовым, его счёт равен единице. Возвращает этот узел. См. также node.sum.

node.sort(compare) · Исходный код, Примеры

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

В отличие от node.sum, функция compare получает два узла, а не данные двух узлов. Например, если данные имеют свойство value, это сортирует узлы по убыванию агрегированного значения узла и всех его потомков, как рекомендуется для упаковки кругов:

root
    .sum(function(d) { return d.value; })
    .sort(function(a, b) { return b.value - a.value; });

Аналогично, для сортировки узлов по убыванию высоты (наибольшее расстояние от любого дочернего листа) и затем по убыванию значения, как рекомендуется для деревьев-картограмм и ледяных столбиков:

root
    .sum(function(d) { return d.value; })
    .sort(function(a, b) { return b.height - a.height || b.value - a.value; });

Для сортировки узлов по убыванию высоты, а затем по возрастанию id, как рекомендуется для деревьев и дендрограмм:

root
    .sum(function(d) { return d.value; })
    .sort(function(a, b) { return b.height - a.height || a.id.localeCompare(b.id); });

Вы должны вызвать node.sort перед вызовом иерархической компоновки, если хотите, чтобы новый порядок сортировки повлиял на компоновку; см. node.sum для примера.

node[Symbol.iterator]() Источник

Возвращает итератор по потомкам node в порядке обхода в ширину. Например:

for (const descendant of node) {
  console.log(descendant);
}

node.each(function[, that]) · Источник, Примеры

Вызывает указанную функцию для node и каждого потомка в порядке обхода в ширину, так что данный узел посещается только в том случае, если все узлы меньшей глубины уже посещены, а также все предшествующие узлы той же глубины. Указанная функция получает текущего потомка, индекс обхода (с нуля) и текущий узел. Если that указан, он является контекстом this для обратного вызова.

node.eachAfter(function[, that]) · Источник, Примеры

Вызывает указанную функцию для node и каждого потомка в последовательности обхода постфиксного выражения, так что данный узел посещается только после того, как все его потомки уже посещены. Указанная функция получает текущего потомка, индекс обхода (с нуля) и текущий узел. Если that указан, он является контекстом this для обратного вызова.

node.eachBefore(function[, that]) · Источник, Примеры

Вызывает указанную функцию для node и каждого потомка в последовательности обхода префиксного выражения, так что данный узел посещается только после того, как все его предки уже посещены. Указанная функция получает текущего потомка, индекс обхода (с нуля) и текущий узел. Если that указан, он является контекстом this для обратного вызова.

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

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

Структура

Рассмотрим следующую таблицу взаимосвязей:

Имя	Родитель
Ева
Каин	Ева
Сет	Ева
Енос	Сет
Нойм	Сет
Авель	Ева
Аван	Ева
Енох	Аван
Азура	Ева

Эти имена удобно уникальны, поэтому мы можем однозначно представить иерархию в виде файла CSV:

name,parent
Eve,
Cain,Eve
Seth,Eve
Enos,Seth
Noam,Seth
Abel,Eve
Awan,Eve
Enoch,Awan
Azura,Eve

Для разбора CSV с помощью d3.csvParse:

var table = d3.csvParse(text);

Это возвращает:

[
  {"name": "Eve",   "parent": ""},
  {"name": "Cain",  "parent": "Eve"},
  {"name": "Seth",  "parent": "Eve"},
  {"name": "Enos",  "parent": "Seth"},
  {"name": "Noam",  "parent": "Seth"},
  {"name": "Abel",  "parent": "Eve"},
  {"name": "Awan",  "parent": "Eve"},
  {"name": "Enoch", "parent": "Awan"},
  {"name": "Azura", "parent": "Eve"}
]

Для преобразования в иерархию:

var root = d3.stratify()
    .id(function(d) { return d.name; })
    .parentId(function(d) { return d.parent; })
    (table);

Это возвращает:

Stratify

Теперь эту иерархию можно передать в иерархическую компоновку, например, d3.tree, для визуализации.

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

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

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

Генерирует новую иерархию из указанных табличных данных data.

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

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

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

Функция доступа к id вызывается для каждого элемента входных данных, переданных оператору stratify, получая текущие данные (d) и текущий индекс (i). Возвращаемая строка используется для идентификации связей узла в сочетании с идентификатором родителя. Для листовых узлов идентификатор может быть неопределённым; в противном случае идентификатор должен быть уникальным. (Null и пустая строка эквивалентны неопределённому значению.)

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

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

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

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

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

Если path указан, устанавливает функцию доступа к пути и возвращает этот оператор stratify. В противном случае возвращает текущую функцию доступа к пути, которая по умолчанию неопределённа. Если функция доступа к пути задана, аргументы id и parentId игнорируются, и вычисляется иерархия в стиле Unix по разделяемым слешами строкам, возвращаемым функцией доступа к пути, при необходимости присваивая родительские узлы и идентификаторы.

d3.stratify().path(d => d)(["a/b", "a/c"]); // nodes with id "/a", "/a/b", "/a/c"

Кластеризация

Dendrogram

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

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

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

cluster(root)

Компонует указанный корневой иерархический узел, присваивая следующие свойства корню и его потомкам:

node.x - координата x узла
node.y - координата y узла

Координаты x и y представляют произвольную систему координат; например, вы можете рассматривать x как угол, а y как радиус, чтобы получить радиальную компоновку. Возможно, вам понадобится вызвать root.sort перед передачей иерархии в компоновку кластеров.

cluster.size([size])

Если size указан, устанавливает размер этой компоновки кластеров на указанный двухэлементный массив чисел [ширина, высота] и возвращает эту компоновку кластеров. Если size не указан, возвращает текущий размер компоновки, который по умолчанию равен [1, 1]. Размер компоновки null указывает, что будет использоваться размер узла. Координаты x и y представляют произвольную систему координат; например, чтобы получить радиальную компоновку, размер [360, радиус] соответствует ширине 360° и глубине радиус.

cluster.nodeSize([size])

Если указан size, задаёт размер узла этой компоновки кластера в указанный двумерный массив чисел [width, height] и возвращает эту компоновку кластера. Если size не указан, возвращает текущий размер узла, который по умолчанию равен null. Размер узла, равный null, означает, что будет использован размер разметки вместо него. Когда размер узла указан, корневой узел всегда позиционируется в ⟨0, 0⟩.

cluster.separation([separation])

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

function separation(a, b) {
  return a.parent == b.parent ? 1 : 2;
}

Сепаратор используется для разделения соседних листьев. Функция сепаратора получает два листа a и b и должна вернуть желаемое разделение. Узлы обычно являются соседями, хотя узлы могут быть более удалёнными родственниками, если разметка решит расположить такие узлы рядом.

Дерево

Tidy Tree

Разметка дерева создаёт аккуратные диаграммы узлов-связей деревьев, используя алгоритм «аккуратного» разбиения Reingold–Tilford, улучшенный для работы за линейное время Buchheim et al. Аккуратные деревья обычно более компактны, чем дендрограммы.

d3.tree() · Исходный код, Примеры

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

tree(root)

Выполняет разметку указанного корневого узла иерархии, присваивая следующие свойства корневому узлу и его потомкам:

node.x - координата x узла
node.y - координата y узла

Координаты x и y представляют произвольную систему координат; например, вы можете рассматривать x как угол, а y как радиус для создания радальной разметки. Возможно, вам нужно вызвать root.sort перед передачей иерархии в разметку дерева.

tree.size([size])

Если size указан, устанавливает размер этой разметки дерева в указанный двумерный массив чисел [width, height] и возвращает эту разметку дерева. Если size не указан, возвращает текущий размер разметки, который по умолчанию равен [1, 1]. Размер разметки, равный null, означает, что будет использован размер узла вместо него. Координаты x и y представляют произвольную систему координат; например, для создания радальной разметки, размер [360, radius] соответствует ширине 360° и глубине radius.

tree.nodeSize([size])

Если size указан, задаёт размер узла этой разметки дерева в указанный двумерный массив чисел [width, height] и возвращает эту разметку дерева. Если size не указан, возвращает текущий размер узла, который по умолчанию равен null. Размер узла, равный null, означает, что будет использован размер разметки вместо него. Когда размер узла указан, корневой узел всегда позиционируется в ⟨0, 0⟩.

tree.separation([separation])

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

function separation(a, b) {
  return a.parent == b.parent ? 1 : 2;
}

Вариант, который более подходит для радиальных разметки, уменьшает разрыв сепаратора пропорционально радиусу:

function separation(a, b) {
  return (a.parent == b.parent ? 1 : 2) / a.depth;
}

Сепаратор используется для разделения соседних узлов. Функция сепаратора получает два узла a и b и должна вернуть желаемое разделение. Узлы обычно являются соседями, хотя узлы могут быть более удалёнными родственниками, если разметка решит расположить такие узлы рядом.

Деревовидная карта

Treemap

Представленная Беном Шнайдерманом в 1991 году, деревовидная карта рекурсивно разбивает область на прямоугольники в соответствии со значением, связанным с каждым узлом. Реализация деревовидной карты D3 поддерживает расширяемый метод заполнения: по умолчанию метод прямоугольного заполнения стремится генерировать прямоугольники с «золотым» соотношением сторон; это обеспечивает лучшую читаемость и оценку размеров по сравнению со методом разделения и нарезки, который просто чередует горизонтальное и вертикальное деление по глубине.

d3.treemap() · Исходный код, Примеры

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

treemap(root)

node.x0 - левая граница прямоугольника
node.y0 - верхняя граница прямоугольника
node.x1 - правая граница прямоугольника
node.y1 - нижняя граница прямоугольника

Перед передачей иерархии в разметку деревовидной карты необходимо вызвать root.sum. Вероятно, также следует вызвать root.sort для упорядочения иерархии перед вычислением разметки.

treemap.tile([tile])

Если tile указан, устанавливает метод заполнения в указанную функцию и возвращает эту разметку деревовидной карты. Если tile не указан, возвращает текущий метод заполнения, который по умолчанию равен d3.treemapSquarify с золотым соотношением.

treemap.size([size])

Если size указан, устанавливает размер этой разметки деревовидной карты в указанный двумерный массив чисел [width, height] и возвращает эту разметку деревовидной карты. Если size не указан, возвращает текущий размер, который по умолчанию равен [1, 1].

treemap.round([round])

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

treemap.padding([padding])

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

treemap.paddingInner([padding])

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

treemap.paddingOuter([padding])

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

treemap.paddingTop([padding])

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

treemap.paddingRight([padding])

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

treemap.paddingBottom([padding])

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

treemap.paddingLeft([padding])

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

Деревовидная карта — заполнение

Несколько встроенных методов заполнения предоставляются для использования с treemap.tile.

d3.treemapBinary(node, x0, y0, x1, y1) · Исходный код, Примеры

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

d3.treemapDice(узел, x0, y0, x1, y1) · Исходный код, Примеры

Делит прямоугольную область, заданную x0, y0, x1, y1, горизонтально в соответствии со значением каждого из дочерних элементов указанного узла. Дочерние элементы размещаются в порядке, начиная с левого края (x0) данного прямоугольника. Если сумма значений дочерних элементов меньше значения указанного узла (т.е., если у указанного узла есть ненулевое внутреннее значение), оставшееся свободное пространство будет расположено на правом краю (x1) данного прямоугольника.

d3.treemapSlice(узел, x0, y0, x1, y1) · Исходный код, Примеры

Делит прямоугольную область, заданную x0, y0, x1, y1, вертикально в соответствии со значением каждого из дочерних элементов указанного узла. Дочерние элементы размещаются в порядке, начиная с верхней границы (y0) данного прямоугольника. Если сумма значений дочерних элементов меньше значения указанного узла (т.е., если у указанного узла есть ненулевое внутреннее значение), оставшееся свободное пространство будет расположено на нижней границе (y1) данного прямоугольника.

d3.treemapSliceDice(узел, x0, y0, x1, y1) · Исходный код, Примеры

Если у указанного узла чётная глубина, делегирует вызов treemapSlice; в противном случае делегирует вызов treemapDice.

d3.treemapSquarify(узел, x0, y0, x1, y1) · Исходный код, Примеры

Реализует алгоритм squarified treemap Брюльса и др., который стремится создать прямоугольники с заданным отношением сторон.

d3.treemapResquarify(узел, x0, y0, x1, y1) · Исходный код, Примеры

Аналогично d3.treemapSquarify, за исключением сохранения топологии (смежности узлов) предыдущей компоновки, вычисленной d3.treemapResquarify, если она есть и использовала то же целевое отношение сторон. Этот метод разбиения хорош для анимации изменений в treemap, потому что он изменяет только размеры узлов, а не их относительное положение, тем самым избегая отвлекающего перемешивания и перекрытия. Однако недостатком стабильного обновления является нерациональная компоновка для последующих обновлений: только первая компоновка использует алгоритм squarified Брюльса и др.

squarify.ratio(отношение) · Исходный код, Примеры

Указывает желаемое отношение сторон создаваемых прямоугольников. отношение должно быть указано как число, большее или равное единице. Обратите внимание, что ориентация создаваемых прямоугольников (высокие или широкие) не подразумевается отношением; например, отношение два будет пытаться создать смесь прямоугольников, у которых отношение ширина:высота равно либо 2:1, либо 1:2. (Однако вы можете приблизительно добиться этого результата, сгенерировав квадратный treemap при разных размерах, а затем растянув treemap до нужного отношения сторон.) Кроме того, указанное отношение является лишь подсказкой для алгоритма разбиения; прямоугольники не гарантируются в том, что будут иметь заданное отношение сторон. Если не указано, отношение сторон по умолчанию равно золотому сечению, φ = (1 + sqrt(5)) / 2, в соответствии с Kong и др.

Разбиение

Partition

Компоновка разбиения создаёт диаграммы смежности: пространственное представление диаграммы дерева «узел-связь». Вместо рисования связи между родителем и ребёнком в иерархии, узлы изображаются как сплошные области (дуги или прямоугольники), а их расположение относительно других узлов показывает их положение в иерархии. Размер узлов кодирует количественную размерность, которую трудно показать в диаграмме «узел-связь».

d3.partition() · Исходный код, Примеры

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

partition(корень)

Компонует указанный корень иерархии, присваивая следующие свойства корню и его потомкам:

узел.x0 - левый край прямоугольника
узел.y0 - верхний край прямоугольника
узел.x1 - правый край прямоугольника
узел.y1 - нижний край прямоугольника

Вы должны вызвать корень.sum перед передачей иерархии в компоновку разбиения. Вы также, вероятно, захотите вызвать корень.sort, чтобы отсортировать иерархию перед вычислением компоновки.

partition.size([размер])

Если размер указан, устанавливает размер этой компоновки разбиения на заданный двумерный массив чисел [ширина, высота] и возвращает эту компоновку разбиения. Если размер не указан, возвращает текущий размер, который по умолчанию равен [1, 1].

partition.round([округлять])

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

partition.padding([отступ])

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

Упаковывание

Circle-Packing

Диаграммы вложения используют вложение (гнездование), чтобы представить иерархию. Размер кружков листьев кодирует количественную размерность данных. Вложенные кружки показывают приблизительный кумулятивный размер каждого поддерева, но из-за пустого пространства наблюдается некоторое искажение; только кружки листьев можно сравнивать точно. Хотя упаковка кружков не использует пространство так эффективно, как treemap, «потерянное» пространство более чётко показывает иерархическую структуру.

d3.pack() · Исходный код, Примеры

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

pack(корень)

Компонует указанный корень иерархии, присваивая следующие свойства корню и его потомкам:

узел.x - координата x центра кружка
узел.y - координата y центра кружка
узел.r - радиус кружка

Вы должны вызвать корень.sum перед передачей иерархии в компоновку упаковывания. Вы также, вероятно, захотите вызвать корень.sort, чтобы отсортировать иерархию перед вычислением компоновки.

pack.radius([радиус])

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

pack.size([размер])

Если размер указан, устанавливает размер этой компоновки упаковывания на заданный двумерный массив чисел [ширина, высота] и возвращает эту компоновку упаковывания. Если размер не указан, возвращает текущий размер, который по умолчанию равен [1, 1].

pack.padding([отступ])

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

d3.packSiblings(кружки) · Исходный код

Упаковывает указанный массив кружков, каждый из которых должен иметь свойство кружок.r, указывающее радиус кружка. Присваивает следующие свойства каждому кружку:

circle.x - координата x центра круга
circle.y - координата y центра круга

Круги размещаются согласно алгоритму упаковки по цепочке спереди, разработанному Wang et al.

d3.packEnclose(circles) · Исходный код, Примеры

Вычисляет наименьший круг, который охватывает указанный массив circles, каждый из которых должен иметь свойство circle.r, определяющее радиус круга, и свойства circle.x и circle.y, определяющие центр круга. Окружность, охватывающая круг, вычисляется с помощью алгоритма Матушека-Шамира-Вельца. (См. также Проблема Аполлония.)