D3.js group() 方法

D3.js是一款JavaScript库，用于创建数据可视化和互动Web图表。d3.group()方法可以根据给定的键创建一个分组对象来对数据进行分组。在本文中，将介绍d3.group()方法的语法、参数和示例。

语法

d3.group(data[, keys[, value]])

d3.group()方法的语法包括三个参数：

• data: 要分组的原始数据。
• keys（可选）：用于分组的键。若未指定键，则使用默认值。
• value（可选）：返回的值的函数。

参数

data

必须是一个可迭代的对象，如数组、Map对象或任何可以使用forEach方法进行遍历的对象。

keys

可以是一个函数或是一个用逗号分隔的字符串，最终会返回一个由分组键组成的数组。如果未指定键，则使用默认键。

• 如果提供了一个键字符串，则使用eval()函数将该字符串转换为一个函数。
• 如果提供了一个键函数，则使用该函数提取数据中的键。

value

是一个可选的参数，如果提供了该参数，将返回一个使用给定键值组成的对象。该函数必须返回一个原始值，如对象、数组或字符串。

如果该参数未指定，则返回D3默认的键值分组格式。在此模式下，您将获得一个子数组，其中包含键的所有值。

示例

让我们通过例子来学习如何使用d3.group()方法。

基本示例

假设我们有一个销售数据，存储在以下数据结构中：

const sales = [
  { region: "West", product: "Product A", sales: 1000 },
  { region: "East", product: "Product B", sales: 1500 },
  { region: "North", product: "Product B", sales: 2500 },
  { region: "South", product: "Product A", sales: 500 },
  { region: "West", product: "Product B", sales: 1500 },
  { region: "East", product: "Product A", sales: 700 }
]

我们可以使用d3.group()方法，按区域和产品分组数据：

const salesByRegionProduct = d3.group(sales, d => d.region, d => d.product);
console.log(salesByRegionProduct);

输出结果：

Map(4) {
  "West" => Map(2) {
    "Product A" => [{ region: "West", product: "Product A", sales: 1000 }],
    "Product B" => [{ region: "West", product: "Product B", sales: 1500 }]
  },
  "East" => Map(2) {
    "Product B" => [{ region: "East", product: "Product B", sales: 1500 }],
    "Product A" => [{ region: "East", product: "Product A", sales: 700 }]
  },
  "North" => Map(1) {
    "Product B" => [{ region: "North", product: "Product B", sales: 2500 }]
  },
  "South" => Map(1) {
    "Product A" => [{ region: "South", product: "Product A", sales: 500 }]
  }
}

自定义键和值

我们也可以使用自定义键和值来分组数据。例如，我们可以按照地区和产品分组，然后计算每个组的销售总额：

const salesByRegionProduct = d3.group(
  sales,
  d => d.region,
  d => d.product,
  regionProduct => d3.sum(regionProduct, d => d.sales)
);
console.log(salesByRegionProduct);

输出结果：

Map(4) {
  "West" => Map(2) {
    "Product A" => 1000,
    "Product B" => 1500
  },
  "East" => Map(2) {
    "Product B" => 1500,
    "Product A" => 700
  },
  "North" => Map(1) {
    "Product B" => 2500
  },
  "South" => Map(1) {
    "Product A" => 500
  }
}

在上面的示例中，我们定义了一个函数，该函数计算每个组的销售总额。该函数作为第三个参数传递给d3.group()方法。

总结

d3.group()方法是D3.js中用于分组数据的强大工具。通过给定一个键并提供一个可选的值函数，您可以根据数据的任何属性进行分组，并执行各种计算。该方法返回一个Map对象，键是组名称，值是由值函数产生的值。我们强烈推荐您在D3可视化中使用该方法。