d3-hierarchy

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

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

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

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

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

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

Установка

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

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

var treemap = 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"
    }
  ]
}

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

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

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

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. undefined, если такой узел не найден.

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

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

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

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

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

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

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 и каждого потомка в порядке обхода в ширину, так что данный узел посещается только тогда, когда все узлы меньшей глубины уже посещены, а также все предшествующие узлы той же глубины. Указанная функция получает текущего потомка, индекс обхода (от 0) и этот узел. Если указано that, оно используется как контекст this для обратного вызова.

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

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

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

Вызывает указанную функцию для node и каждого потомка в порядке префиксного обхода, так что данный узел посещается только после того, как все его предки уже посещены. Указанная функция получает текущего потомка, индекс обхода (от 0) и этот узел. Если указано 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);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 указан, устанавливает размер узла этой компоновки кластеров на указанный двухелементный массив чисел [ширина, высота] и возвращает эту компоновку кластеров. Если size не указан, возвращает текущий размер узла, который по умолчанию равен null. Размер узла null указывает, что вместо него будет использоваться размер компоновки. Если размер узла указан, корневой узел всегда размещается в координатах ⟨0, 0⟩.

cluster.separation([separation])

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

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

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

Дерево

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

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

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

tree(root)

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

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

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

tree.size([size])

Если size задан, устанавливает размер этого компоновщика дерева на указанный двумерный массив чисел [width, height] и возвращает этот компоновщик дерева. Если size не задан, возвращает текущий размер компоновки, который по умолчанию равен [1, 1]. Размер компоновки null указывает на то, что вместо него будет использован размер узла node size. Координаты 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 и должна возвращать желаемое расстояние. Узлы обычно являются соседними, хотя узлы могут быть более удалёнными, если компоновка решит разместить такие узлы рядом.

Дерево-карта

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

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

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

treemap(root)

Располагает указанную иерархию root hierarchy, назначая следующие свойства для 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(node, x0, y0, x1, y1) · Источник, Примеры

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

d3.treemapSlice(node, x0, y0, x1, y1) · Источник, Примеры

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

d3.treemapSliceDice(node, x0, y0, x1, y1) · Источник, Примеры

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

d3.treemapSquarify(node, x0, y0, x1, y1) · Source, Примеры

Реализует алгоритм квадратифицированного древовидного макета Брюльса и др., который стремится создавать прямоугольники с заданным коэффициентом формы.

d3.treemapResquarify(node, x0, y0, x1, y1) · Source, Примеры

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

squarify.ratio(ratio) · Source, Примеры

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

Разбиение

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

d3.partition() · Source, Примеры

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

partition(root)

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

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

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

partition.size([size])

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

partition.round([round])

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

partition.padding([padding])

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

Упаковки

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

d3.pack() · Source, Примеры

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

pack(root)

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

• node.x - координата x центра круга
• node.y - координата y центра круга
• node.r - радиус круга

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

pack.radius([radius])

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

pack.size([size])

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

pack.padding([padding])

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

d3.packSiblings(circles) · Source

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

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

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

d3.packEnclose(circles) · Source, Примеры

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