使用 Crossfilter 进行嵌套分组？

Question

交叉筛选的新手，从事的项目需要在一个日期范围内维护总计和这些总计的峰值。

尝试利用 dc.js 示例中的 complex reduction。

我能够获得特定品牌和型号在日期范围内的最大值，但不能获得区域维度或颜色维度的总峰值（按天求和）。

该项目需要以下图表。

按地区显示每日高峰库存总数的条形图
一个可选择的菜单，其中包含数据集的品牌和型号及其各自的每日峰值
一个可选菜单，其中包含数据集的颜色及其相应的每日峰值

下面是数据示例（不包括日期被转换为日期对象。）

var carData = [
    {Date: "11/26/2020", 'Inventory Region': 'SW', 'Make and Model': 'buick enclave' , 'Inventory Count': 12710, Color: 'charcoal' ,'Color Inventory': 3665},
    {Date: "11/26/2020", 'Inventory Region': 'SW', 'Make and Model': 'chevrolet 1500' , 'Inventory Count': 8510, Color: 'brown', 'Color Inventory': 2520},
    {Date: "11/26/2020", 'Inventory Region': 'NE', 'Make and Model': 'chevrolet camaro', 'Inventory Count': 5250, Color: 'silver', 'Color Inventory': 750},
    {Date: "11/26/2020", 'Inventory Region': 'NW', 'Make and Model': 'chevrolet malibu', 'Inventory Count': 4300, Color: 'brown','Color Inventory': 2100},
    {Date: "11/26/2020", 'Inventory Region': 'NW', 'Make and Model': 'dodge coupe', 'Inventory Count': 15100, Color: 'silver', 'Color Inventory': 5200},
    {Date: "11/26/2020", 'Inventory Region': 'NE', 'Make and Model': 'jeep compass', 'Inventory Count': 7300, Color: 'blue', 'Color Inventory': 2300},
    {Date: "11/26/2020", 'Inventory Region': 'NE', 'Make and Model': 'kia forte', 'Inventory Count': 4250,Color: 'white', 'Color Inventory': 2200},
    {Date: "11/26/2020", 'Inventory Region': 'SW', 'Make and Model': 'kia sorento', 'Inventory Count': 9450,Color: 'red', 'Color Inventory': 6525},
    {Date: "11/27/2020", 'Inventory Region': 'SW', 'Make and Model': 'buick enclave' , 'Inventory Count': 11251, Color: 'charcoal' ,'Color Inventory': 2206},
    {Date: "11/27/2020", 'Inventory Region': 'SW', 'Make and Model': 'chevrolet 1500' , 'Inventory Count': 8246, Color: 'brown', 'Color Inventory': 2256},
    {Date: "11/27/2020", 'Inventory Region': 'NE', 'Make and Model': 'chevrolet camaro', 'Inventory Count': 5200, Color: 'silver', 'Color Inventory': 700},
    {Date: "11/27/2020", 'Inventory Region': 'NW', 'Make and Model': 'chevrolet malibu', 'Inventory Count': 4250, Color: 'brown','Color Inventory': 2050},
    {Date: "11/27/2020", 'Inventory Region': 'NW', 'Make and Model': 'dodge coupe', 'Inventory Count': 15000, Color: 'silver', 'Color Inventory': 5100},
    {Date: "11/27/2020", 'Inventory Region': 'NE', 'Make and Model': 'jeep compass', 'Inventory Count': 7200, Color: 'blue', 'Color Inventory': 2200},
    {Date: "11/27/2020", 'Inventory Region': 'NE', 'Make and Model': 'kia forte', 'Inventory Count': 4150,Color: 'white', 'Color Inventory': 2100},
    {Date: "11/27/2020", 'Inventory Region': 'SW', 'Make and Model': 'kia sorento', 'Inventory Count': 8953,Color: 'red', 'Color Inventory': 6058}
];

Answer 1

换句话说，你想按颜色和日期分组，然后找到每种颜色的最大天数。

我假设您也在使用 dc.js，因为您在问题中提到了它。我们要做的是为每种颜色保留运行天数。然后，在value accessor中，我们会找到max.

这比在组缩减期间计算最大值更有效。

const cf = crossfilter(carData),
  colorDimension = cf.dimension(({Color}) => Color),
  colorDayGroup = colorDimension.group().reduce(
    (p, v) => { // add
      const day = d3.timeDay(v.Date).getTime(); // 2. round to day, convert to int
      p[day] = (p[day] || 0) + v['Color Inventory']; // 3
      return p;
    },
    (p, v) => { // remove
      const day = d3.timeDay(v.Date).getTime(); // round to day, convert to int
      p[day] = (p[day] || 0) - v['Color Inventory']; // 4
      return p;
    },
    () => ({}) // 1. init
  );

每个 bin 是从整数天到颜色总和的映射
我们使用 d3.timeDay 将日期对象四舍五入到天数 - 在这个例子中不需要，但如果日期有时间，这会很重要。
向容器中添加行时，查找日期。如果不存在，则默认为零。然后添加颜色库存字段。
删除行也是如此，但我们要减去。

像这样与 valueAccessor 一起使用：

chart.valueAccessor(({key, value}) => d3.max(Object.values(value)))

这将从 day->count 对象中检索所有计数并找到最大计数。

我用this fiddle来测试。我更改了

的值

{Date: "11/27/2020", 'Inventory Region': 'NE', 'Make and Model': 'kia forte', 'Inventory Count': 4150,Color: 'white', 'Color Inventory': 2700},

因为 11/26 是每种颜色的最大一天，我想更好地练习代码。

为了测试，我使用值访问器映射了每个值：

console.log(JSON.stringify(colorDayGroup.all().map(({key, value}) => ({key, value: d3.max(Object.values(value))})), null, 2))

结果：

[
  {
    "key": "blue",
    "value": 2300
  },
  {
    "key": "brown",
    "value": 4620
  },
  {
    "key": "charcoal",
    "value": 3665
  },
  {
    "key": "red",
    "value": 6525
  },
  {
    "key": "silver",
    "value": 5950
  },
  {
    "key": "white",
    "value": 2700
  }
]

使用 Crossfilter 进行嵌套分组？

Nested Grouping with Crossfilter?

crossfilter

dc.js