RU Компоновка с упаковкой

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

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

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

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

# d3.layout.pack()

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

# pack(root)
# pack.nodes(root)

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

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

# pack.links(nodes)

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

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

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

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

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

# pack.sort([comparator])

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

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

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

# pack.value([value])

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

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

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

# pack.size([size])

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

# pack.radius([radius])

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

# pack.padding([padding])

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