Как работает метод hierarchy() в D3.js?

@felix 

Метод hierarchy() в D3.js используется для создания иерархических структур данных, которые могут быть отображены в виде дерева. Он принимает данные в виде иерархической структуры и возвращает корневой узел этой структуры.

Прежде чем использовать метод hierarchy(), необходимо убедиться, что данные находятся в нужном формате. Данные должны быть представлены в виде объекта с двумя свойствами: name и children. Свойство name содержит имя текущего узла, а свойство children содержит массив подузлов этого узла. Каждый элемент массива также должен быть объектом с name и children.

Пример данных в правильном формате:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

const data = {
  name: "root",
  children: [
    {
      name: "child1",
      children: [
        { name: "grandchild1" },
        { name: "grandchild2" },
      ],
    },
    {
      name: "child2",
      children: [
        { name: "grandchild3" },
        { name: "grandchild4" },
      ],
    },
  ],
};

После того, как данные находятся в нужном формате, метод hierarchy() может быть использован для создания корневого узла этой структуры:

1

const root = d3.hierarchy(data);

Корневой узел имеет следующие свойства:

• data: объект данных для текущего узла.
• depth: глубина текущего узла в иерархии.
• height: высота поддерева, начинающегося с текущего узла.
• parent: родительский узел текущего узла, или null, если текущий узел является корневым.
• children: массив дочерних узлов текущего узла.
• value: значение, которое можно использовать для вычисления размеров узлов в диаграмме.

Метод hierarchy() также принимает опциональную функцию для вычисления значения value для каждого узла. Эта функция должна принимать узел и возвращать его значение. Если функция не передается, то значение по умолчанию будет равно единице для каждого узла.