Макет разбиения

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

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

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

d3.layout.partition()

Создаёт новый макет разбиения с настройками по умолчанию: порядок сортировки по умолчанию — по убыванию значения; по умолчанию функция доступа к значению предполагает, что каждый элемент входных данных — это объект с числовым атрибутом значения; по умолчанию функция доступа к дочерним элементам предполагает, что каждый элемент входных данных — это объект с массивом дочерних элементов; размер по умолчанию — 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», «ширина» и «высота» элемента SVG rect. В радиальной ориентации они могут быть использованы для вычисления innerRadius, startAngle, outerRadius и endAngle генератора arc. Декартовая ориентация может называться «деревом-ледяной свечи», а радиальная — «солнечным затмением».

partition.links(nodes)

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

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

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

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

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

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

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

partition.value([value])

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

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

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

partition.size([size])

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

var width = 1800, height = 2000;
var partition = d3.layout.partition()
    .size([width, height])
    .value(function(d) { return d.size; });

Если size не указан, возвращается текущий размер, который по умолчанию равен 1×1. Обратите внимание, что если размер не задан явно, т.е. по умолчанию 1×1, вычисленные координаты каждого элемента будут нормализованы, т.е. каждая координата будет < 1, а сумма всех координат будет равна 1. Следовательно, на пользовательском интерфейсе ничего не будет отображено (так как 1×1 слишком мало, чтобы что-то увидеть). Хорошим способом использования такой ситуации является применение линейного масштабирования диапазона. Результат отображения будет таким же, как в случае явного задания размера диаграммы, но вы получите более гибкое решение для дальнейших реализаций:

// first, declare scaling for X and Y axis
 var width = 1800, height = 2000,
 x = d3.scale.linear().range([0, width]),
 y = d3.scale.linear().range([0, height]);

// then apply the scaling for each calculated coordinate
svg.selectAll("rect").data(nodes)
            .enter().append("svg:rect")
            .attr("x", function(d) { return x(d.x);})
            .attr("y", function(d) { return y(d.y);})
            .attr("width", function(d) {  return  x(d.dx);})
            .attr("height", function(d) { return y(d.dy); });