RU Компоновка с разделением

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

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

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

# d3.layout.partition()

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

# partition(root)
# partition.nodes(root)

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

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

Хотя компоновка имеет размеры по координатам x и y, они представляют произвольную систему координат; например, вы можете трактовать x как радиус, а y как угол для производства радиальной, а не декартовой, компоновки. В декартовой ориентации x, y, dx и dy соответствуют атрибутам "x", "y", "width" и "height" элемента rect SVG. В радиальной ориентации они могут использоваться для вычисления свойств innerRadius, startAngle, outerRadius и endAngle для генератора [колец](RU-Фигуры-SVG#wiki-arc generator). Декартовая ориентация может быть названа деревом сосулек, а радиальная — солнечными лучами.

# partition.links(nodes)

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

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

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

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

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

# partition.sort([comparator])

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

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

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

# partition.value([value])

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

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

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

# partition.size([size])

Если указан параметр size, устанавливает доступный размер компоновки в указанный двухэлементный массив чисел, представляющих координаты x и y. Если параметр size не указан, возвращает текущие размеры, которые по умолчанию установлены в 1×1.