Skip to content

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

Jump to bottom Edit New page
mingun edited this page Jun 5, 2014 · 2 revisions

Вики ▸ Справка по API ▸ Компоновки ▸ Иерархическая компоновка ▸ Древовидная компоновка
English | Русский

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

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

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

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

Также популярна сортировка по имени узла или ключу. Она может быть легко выполнена с использованием функций d3.ascending или d3.descending.

# tree.value([value])

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

Add a custom footer
Add a custom sidebar
Clone this wiki locally