Макет иерархии

Справочник API ▸ Макеты ▸ Макет иерархии

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

• Кластер — группирует сущности в дендрограмму.
• Упаковщик — создаёт иерархический макет с использованием рекурсивного упаковки кругов.
• Разбиение — рекурсивно разбивает дерево узлов на секции типа «солнечный зайчик» или «ледяная горка».
• Дерево — упорядочивает дерево узлов.
• Дерево-карта — использует рекурсивное пространственное деление для отображения дерева узлов.

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

d3.layout.hierarchy()

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

hierarchy(root)

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

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

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

hierarchy.links(nodes)

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

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

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

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

hierarchy.children([accessor])

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

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

hierarchy.sort([comparator])

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

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

Функция компаратора вызывается для пар узлов, передавая данные входных данных для каждого узла. Нулевой компаратор отключает сортировку и использует порядок обхода дерева. Функции компаратора также могут быть реализованы с помощью d3.ascending или d3.descending.

hierarchy.value([value])

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

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

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

hierarchy.revalue(root)

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