Деревовидная компоновка

Справочник по API ▸ Компоновки ▸ Иерархия ▸ Деревовидная компоновка

Компоновка дерева создаёт аккуратные диаграммы узлов-связей деревьев с использованием алгоритма «аккуратного» построения Реингльда–Тильфорда . Например, деревовидную компоновку можно использовать для организации программных классов в иерархии пакетов:

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

d3.layout.tree()

Создаёт новую деревовидную компоновку с настройками по умолчанию: порядок сортировки по умолчанию — null; обработчик дочерних элементов по умолчанию предполагает, что каждый входной элемент данных является объектом с массивом children; функция разделения по умолчанию использует одну ширину узла для родственных элементов и две ширины узла для неродственных элементов; размер по умолчанию — 1×1.

tree(root)
tree.nodes(root)

Выполняет деревовидную компоновку, возвращая массив узлов, связанных с указанным узлом root. Деревовидная компоновка является частью семейства компоновок иерархий D3. Эти компоновки следуют той же основной структуре: аргументом для компоновки является корневой узел иерархии, а возвращаемое значение — массив, представляющий вычисленные позиции всех узлов. На каждом узле заполняются несколько атрибутов:

• parent — родительский узел или null для корневого узла.
• children — массив дочерних узлов или null для листовых узлов.
• depth — глубина узла, начиная с 0 для корневого узла.
• x — вычисленная координата x позиции узла.
• y — вычисленная координата y позиции узла.

Хотя компоновка имеет размер в x и y, это представляет произвольную систему координат; например, вы можете рассматривать x как радиус, а y — как угол, чтобы получить радиальную, а не декартову компоновку.

tree.links(nodes)

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

• source — родительский узел (как описано выше).
• target — дочерний узел.

Этот метод полезен для получения набора описаний связей, подходящих для отображения, часто в сочетании с генератором формы диагональ. Например:

svg.selectAll("path")
    .data(tree.links(nodes))
  .enter().append("path")
    .attr("d", d3.svg.diagonal());

tree.children([children])

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

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

Часто удобно загружать иерархию узлов с помощью d3.json и представлять входную иерархию в виде вложенного JSON-объекта. Например:

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "MergeEdge", "size": 743}
     ]
    },
    {
     "name": "graph",
     "children": [
      {"name": "BetweennessCentrality", "size": 3534},
      {"name": "LinkDistance", "size": 5731}
     ]
    }
   ]
  }
 ]
}

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

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

tree.size([size])

Если size указан, устанавливает доступный размер компоновки на указанный массив из двух чисел, представляющий x и y. Если size не указан, возвращает текущий размер, который по умолчанию равен 1×1. Размер компоновки задаётся в x и y, но это не ограничивается координатами экрана и может представлять произвольную систему координат. Например, для создания радиальной компоновки, где ширина дерева (x) измеряется в градусах, а глубина дерева (y) — это радиус r в пикселях, используйте [360, r].

Свойство size исключает tree.nodeSize; установка tree.size устанавливает tree.nodeSize в null.

tree.nodeSize([nodeSize])

Если nodeSize указан, устанавливает фиксированный размер каждого узла как массив из двух чисел, представляющих x и y. Если nodeSize не указан, возвращает текущий размер узла, который по умолчанию равен null, что указывает на то, что компоновка определяется с помощью свойства tree.size, а не фиксированного размера узла. Размер компоновки указан в x и y, но это не ограничивается координатами экрана и может представлять произвольную систему координат.

Свойство nodeSize исключает tree.size; установка tree.nodeSize устанавливает tree.size в null.

tree.sort([comparator])

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

function comparator(a, b) {
  return b.value - a.value;
}

Сортировка по имени или ключу узла также распространённая практика. Это можно легко сделать с помощью d3.ascending или d3.descending.

tree.value([value])

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