d3-hierarchy

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

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

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

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

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

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

Установка

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

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

var treemap = d3.treemap();

</script>

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

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

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

Иерархия

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

d3.hierarchy(данные[, дочерние]) Источник

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

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

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

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

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

• узел.данные - связанные данные, как указано в конструкторе.
• узел.глубина - ноль для корневого узла и увеличивается на единицу для каждого поколения потомков.
• узел.высота - ноль для листовых узлов и наибольшее расстояние от любого листового потомка для внутренних узлов.
• узел.родитель - родительский узел или null для корневого узла.
• узел.дети - массив дочерних узлов, если таковые имеются; undefined для листовых узлов.
• узел.значение - суммарное значение узла и его потомков; необязательно, см. узел.сумма и узел.счёт.

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

узел.предки() Источник

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

узел.потомки() Источник

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

узел.листья() Источник

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

узел.путь(цель) Источник

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

узел.связи() Источник

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

узел.сумма(значение) Источник

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

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

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

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

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

узел.счёт() Источник

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

узел.сортировка(сравнение) Источник

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

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

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.eachBefore(function) Source

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

node.copy() Source

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

Stratify

Рассмотрим следующую таблицу отношений:

Эти имена удобно уникальны, поэтому мы можем однозначно представить иерархию в виде 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() Source

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

stratify(data) Source

Генерирует новую иерархию из указанных табличных данных. Каждый узел в возвращаемом объекте имеет поверхностную копию свойств из соответствующего объекта данных, за исключением следующих служебных свойств: id, parentId, children.

stratify.id([id]) Source

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

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

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

stratify.parentId([parentId]) Source

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

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

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

Cluster

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

d3.cluster() Source

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

cluster(root) Source

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

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

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

cluster.size([size]) Source

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

cluster.nodeSize([size]) Source

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

cluster.separation([separation]) Source

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

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

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

Tree

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

d3.tree() Source

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

tree(root) Source

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

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

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

tree.size([size]) Source

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

tree.nodeSize([size]) Source

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

tree.separation([separation]) Source

Если 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 поддерживает расширяемый метод разбиения: по умолчанию метод сжатия стремится сгенерировать прямоугольники с золотым соотношением сторон; это обеспечивает лучшую читаемость и оценку размера, чем метод разреза и нарезки, который просто чередует горизонтальное и вертикальное разделение по глубине.

d3.treemap()

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

treemap(root) Источник

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

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

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

treemap.tile([tile]) Источник

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

treemap.size([size]) Источник

Если size указано, устанавливает размер этого макета деревовидной карты на указанный двумерный массив чисел [ширина, высота] и возвращает этот макет деревовидной карты. Если 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, горизонтально в соответствии со значением каждого из дочерних узлов указанного node. Дочерние узлы размещаются в порядке, начиная с левой границы (x0) заданного прямоугольника. Если сумма значений дочерних узлов меньше значения указанного node (т.е., если указанный node имеет ненулевое внутреннее значение), оставшееся свободное пространство разместится на правой границе (x1) заданного прямоугольника.

d3.treemapSlice(node, x0, y0, x1, y1) Источник

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

d3.treemapSliceDice(node, x0, y0, x1, y1) Источник

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

d3.treemapSquarify(node, x0, y0, x1, y1) Источник

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

d3.treemapResquarify(node, x0, y0, x1, y1) Источник

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

squarify.ratio(ratio) Источник

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

Разбиение

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

d3.partition()

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

partition(root) Источник

Выполняет макетирование указанного 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()

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

pack(root) Источник

Выполняет макетирование указанного 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) Источник

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

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

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

d3.packEnclose(circles) Источник

Вычисляет наименьший круг, который охватывает указанный массив circles, каждый из которых должен иметь свойство circle.r, определяющее радиус круга, и свойства circle.x и circle.y, определяющие центр круга. Круг охватывания вычисляется с помощью алгоритма Matoušek-Sharir-Welzl. (См. также Задача Аполлония.)