与Crossfilter嵌套分组? [英] Nested Grouping with Crossfilter?

问题描述

是交叉过滤的新功能，正在从事一个项目，该项目需要在一个日期范围内保持总计和​​这些总计的峰值.

New to cross filter and working on a project that needs to maintain summed totals and peak values of those summed totals over a date range.

尝试利用复杂度降低dc.js示例.

Tried to utilize the complex reduction from the dc.js examples.

在日期范围内，我能够获得特定品牌和型号的最大值，但对于区域尺寸或颜色尺寸，无法获得总峰值(按天求和).

I was able to get the max of a specific make and model over the date range but not the summed total peak (summed by day) for say the Region dimension or color dimension.

该项目需要以下图表.

• 一个条形图，显示按地区显示的每日总高峰库存量
• 具有菜单&的可选菜单模型及其各自的每日峰值数据集
• 一个可选菜单，其中包含数据集的颜色及其相应的每日峰值

下面是数据(不包括日期转换为日期对象的数据)的示例.

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}
];

推荐答案

以另一种方式提出您的问题，您想按颜色和日期进行分组，然后找到每种颜色的最长日期.

To put your question another way, you want to group by both color and day, and then find the max day for each color.

由于您在问题中提到了dc.js，因此我假设您也在使用dc.js.我们要做的是保持每种颜色的连续运行天数.然后，在值访问器中，会找到最大的

I'm going to assume you are also using dc.js since you mention it in your question. What we'll do is keep a running count of days for each color. Then, in the value accessor, we will find the max.

这比计算组缩减中的最大值效率更高.

This is more efficient than calculating the maximum during group reduction.

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
  );

1. 每个bin是从整数天到颜色总和的映射图
2. 我们使用 d3.timeDay 将日期对象四舍五入为日期-在此示例中不需要，但是如果日期有时间，这将很重要.
3. 将某行添加到垃圾箱时，请查找日期.如果不存在，则默认为零.然后添加颜色清单字段.
4. 与删除行相同，但我们减去.

1. Each bin is a map from integer days to color sums
2. We use d3.timeDay to round date objects to days - not needed in this example, but this would matter if the dates have times.
3. When adding a row to a bin, lookup the day. If it does not exist, default it to zero. Then add the color inventory field.
4. Same thing for removing a row, but we subtract.

将其与 valueAccessor 一起使用，如下所示:

Use it with a valueAccessor like this:

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

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

This retrieves all the counts from the day->count object and finds the max count.

我用这把小提琴进行了测试.我更改了

I used this fiddle to test. I changed the value of

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

因为11/26是每种颜色的最长时间，所以我想更好地练习代码.

because 11/26 was the max day for every color, and I wanted to exercise the code better.

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

To test, I mapped each value using the value accessor:

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嵌套分组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！