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(data[, children]) Исходный код

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

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

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

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

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

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

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

node.ancestors() Исходный код

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

node.descendants() Исходный код

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

node.leaves() Исходный код

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

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

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

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.each(function) Исходный код

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

node.eachAfter(function) Исходный код

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

node.eachBefore(function) Source

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

node.copy() Source

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

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

stratify(data) Source

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

stratify.id([id]) Source

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

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

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

stratify.parentId([parentId]) Source

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

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

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

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

Dendrogram

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

d3.cluster() Source

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

cluster(root) Source

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

узел.x - координата x узла
узел.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 и должна возвращать желаемое разделение. Узлы обычно являются братьями, хотя узлы могут быть более удалённо связаны, если компоновка решит расположить такие узлы рядом.

Дерево

Tidy Tree

Компоновка дерева создаёт упорядоченные диаграммы узел-связь деревьев, используя алгоритм «упорядоченного» Рийнгольда—Тильфорда, усовершенствованный для работы за линейное время Буххаймом и др. Упорядоченные деревья обычно более компактны, чем дендрограммы.

d3.tree() Source

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

tree(root) Source

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

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

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

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

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 указан, устанавливает размер этой компоновки деревовидной карты на указанный массив из двух чисел [ширина, высота] и возвращает эту компоновку деревовидной карты. Если 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) Источник

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

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

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

squarify.ratio(ratio) Source

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

Разбиение

Partition

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

d3.partition()

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

partition(root) Source

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

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

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

partition.size([size]) Source

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

partition.round([round]) Source

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

partition.padding([padding]) Source

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

Упаковщик

Circle-Packing

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

d3.pack()

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

pack(root) Source

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

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

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

pack.radius([radius]) Source

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

pack.size([size]) Source

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

pack.padding([padding]) Source

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

d3.packSiblings(circles) Source

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

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

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

d3.packEnclose(circles) Source

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