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

Пользователь

от william_stoltenberg , в категории: JavaScript , 2 года назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от loyal , 2 года назад

@william_stoltenberg 

Метод nest() в D3.js используется для группировки данных на основе одного или нескольких ключей и создания иерархической структуры данных.


Синтаксис метода nest() выглядит следующим образом:

1
2
3
4
5
6
7
d3.nest()
  .key(function(d) { /*...*/ })
  .sortKeys(function(a, b) { /*...*/ })
  .key(function(d) { /*...*/ })
  .sortKeys(function(a, b) { /*...*/ })
  /*...*/
  .entries(data);


Метод nest() создает объект, который позволяет цепочку вызовов методов key() и sortKeys() для указания ключей группировки и порядка сортировки.


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


Метод nest() также может быть использован для создания вложенных группировок, путем добавления дополнительных вызовов key() и sortKeys().


Наконец, метод entries() создает массив объектов, каждый из которых представляет группу данных с ключом и вложенными данными.


Пример использования метода nest() в D3.js для группировки данных по двум ключам:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
var data = [
  {category: "A", subcategory: "X", value: 10},
  {category: "A", subcategory: "Y", value: 20},
  {category: "B", subcategory: "X", value: 30},
  {category: "B", subcategory: "Y", value: 40}
];

var nestedData = d3.nest()
  .key(function(d) { return d.category; })
  .sortKeys(d3.ascending)
  .key(function(d) { return d.subcategory; })
  .sortKeys(d3.ascending)
  .entries(data);


Результат будет массив объектов, который выглядит следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
[
  {
    key: "A",
    values: [
      {key: "X", values: [{category: "A", subcategory: "X", value: 10}]},
      {key: "Y", values: [{category: "A", subcategory: "Y", value: 20}]}
    ]
  },
  {
    key: "B",
    values: [
      {key: "X", values: [{category: "B", subcategory: "X", value: 30}]},
      {key: "Y", values: [{category: "B", subcategory: "Y", value: 40}]}
    ]
  }
]


Здесь данные сгруппированы по категориям и подкатегориям, и каждый объект содержит ключ и значения для каждой группы.