Макет Упаковки

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

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

Этот макет основан на Визуализации больших иерархических данных с помощью упаковки кругов Ваном и др.

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

Как и другие классы в 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 не задано, возвращает текущий отступ, который по умолчанию равен нулю.