RU Дендроплан

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

Введённый Беном Шнейдерманом (Ben Shneiderman) в 1991 г., дендроплан рекурсивно разбивает площадь на прямоугольники. Как и в диаграммах смежности, размер любого узла в дереве просматривается очень быстро. «Оквадраченные» дендропланы используют почти квадратные прямоугольники, которые обладают лучшей читаемостью и оценкой размера, нежели наивное разделение на «срезы-и-фрагменты». Более экзотические алгоритмы, вроде разбиения Вороного или jigsaw-дендропланов так же существуют, но менее распространены.

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

# d3.layout.treemap()

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

# treemap(root)
# treemap.nodes(root)

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

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

Обратите внимание, что это изменит узлы, которые вы передали в компоновку!

Хотя компоновка имеет размеры по координатам x и y, они представляют произвольную систему координат; например, вы можете трактовать x как радиус, а y как угол для производства радиальной, а не декартовой, компоновки. В декартовой ориентации x, y, dx и dy соответствуют атрибутам "x", "y", "width" и "height" элемента rect SVG.

# treemap.links(nodes)

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

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

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

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

# treemap.children([children])

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

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

# treemap.sort([comparator])

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

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

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

# treemap.value([value])

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

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

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

# treemap.size([size])

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

# treemap.padding([padding])

Возвращает / устанавливает поля для каждой ячейки дендроплана, в пикселях. Поля определяют количество дополнительного пространиства, зарезервированного между родителем и его потомками; это пространство может использоваться для индикации иерархии через вкладывание или для резервирования места под подписи родителя. Если поля не используются, то листья дерева полностью заполнят размеры компоновки.

Если указан параметр padding, устанавливает новые поля и возвращает дендроплан; если параметр padding не указан, возвращает текущие поля. Поля могут определяться несколькими способами:

• Значение null отключает поля; null эквиваленте нулевым полям.
• Число указывает одинаковые поля, в пикселях, для всех четырёх сторон.
• Массив чисел указывается верхнее, правое, нижнее и левое значения полей.

Поля также могут определяться функцией, которая может возвращать одно из этих трёх значений. Функция будет вычисляться для каждого внутреннего узла (не листа) и будет использоваться для динамического вычисления полей.

# treemap.round([round])

Если указан параметр round, устанавливает, должен ли дендроплан округлять координаты для точного попадания в пиксели. Это может быть полезно для избегания артефактов сглаживания в SVG. Если параметр round не указан, возвращает текущий флаг округления.

# treemap.sticky([sticky])

Если указан параметр sticky, устанавливает, является ли дендроплан «липучим»: липучий дендроплан будет сохранять взаимное расположение узлов во время перехода. Распределение узлов по прямоугольным горизонтальным и вертикальным строкам сохраняется постоянным в процессе обновления путём хранения атрибута z последнего элемента в каждой строке; это позволяет узлам плавно изменять размер без артефактов перемешивания или наложения, которые препятствовали бы восприятию изменяющихся значений. Однако, обратите внимание, что это приводит к неоптимальной компоновке одного из двух состояний. Если параметр sticky не указан, возвращает текущий признак липучести.

Замечание по реализации: липучие дендропланы кэшируют массив узлов; поэтому невозможно использовать одну и ту же компоновку для нескольких наборов данных. Для сброса кэшированного состояния липучей компоновки при переключении наборов данных просто снова вызовите sticky(true). Начиная с версии 1.25.0, иерархические компоновки по умолчанию больше не копируют входные данные на каждый вызов, так что может быть возможно убрать кэширование и сделать компоновку полностью без внутреннего состояния.

# treemap.mode([mode])

Если указан параметр mode, устанавливает алгоритм компоновки. Если параметр mode не указан, возвращает текущий алгоритм компоновки, который по умолчанию установлен в "squarify". Поддерживаются следующие режимы:

• squarify — разделение по прямоугольникам; квадратность регулируется через параметр ratio.
• slice — разделение по горизонтали.
• dice — разделение по вертикали.
• slice-dice — чередование разделения по горизонтали и вертикали.

# ratio([ratio])

Если указан параметр ratio, устанавливает коэффициент квадратности компоновки. Если параметр ratio не указан, возвращает текущий коэффициент квадратности компоновки, который по умолчанию равен 0.5 * (1 + Math.sqrt(5)).