Макет Treemap

Ссылка на API ▸ Макеты ▸ Иерархия ▸ Макет Treemap

Представленный Беном Шнайдерманом в 1991 году, макет treemap рекурсивно разбивает область на прямоугольники. Как и в случае с диаграммами смежности, размер любого узла в дереве быстро выявляется. «Квадрированные» treemap используют приблизительно квадратные прямоугольники, что обеспечивает лучшую читаемость и оценку размера, чем наивное деление «разрезанием и нарезанием». Существуют более сложные алгоритмы, такие как Voronoi и jigsaw treemaps, но они менее распространены.

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

d3.layout.treemap()

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

treemap(root)
treemap.nodes(root)

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

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

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

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

treemap.links(nodes)

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

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

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

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

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

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

treemap.value([value])

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

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

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

treemap.size([size])

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

treemap.padding([padding])

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

Если padding указано, устанавливает новый отступ и возвращает макет treemap; если padding не указано, возвращает текущий отступ. Отступ может быть задан несколькими способами:

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

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

treemap.round([round])

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

treemap.sticky([sticky])

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

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

treemap.mode([mode])

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

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

treemap.ratio([ratio])

Если ratio указано, устанавливает отношение макета. Если ratio не указано, возвращает текущее отношение макета, которое по умолчанию равно .5 * (1 + Math.sqrt(5))