当没有过滤器应用于 DC.js 图表时，有条件的自定义 X 值暗淡名称

Question

有一个后续问题是按颜色和日期分组，然后找到每种颜色的最大天数。戈登很好地解释了如何每天为每种颜色保持运行总和并找到最大值。现在我试图在条形图中显示所有颜色的总和及其各自的峰值。

简而言之，我正在寻找一个将峰值求和为总值并显示总计的数据点。我很困惑我应该为维度使用什么，因为我想要一个名为 TOTAL 的自定义 X 暗淡值而不是所有颜色的列表。对于原始示例，将为峰值颜色清单的总和显示值为 25,760 的单个条。

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

这是上一个答案中的 group reduce 函数：

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

和计算最大值的值访问器：

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

Answer 1

如果你想给 dc.js NumberDisplay widget, the best way to get it in there is to supply a fake groupAll 对象提供一个单一的值，也就是一个具有单一方法 .value() 的对象，其中 returns 值.

在这里，我们希望它从每个 bin 中取最大值的总和：

function sum_peaks_groupAll(group) {
  return {
    value: () => d3.sum(group.all(), ({value}) => d3.max(Object.values(value)))
  };
}
const sumPeaks = sum_peaks_groupAll(colorDayGroup);

由于历史原因，数字显示小部件需要在为其组使用 groupAll 对象时将身份函数作为值访问器传递：

number.group(sumPeaks)
  .valueAccessor(d => d);

Demo fiddle.

单柱条形图

如果您想要一个显示此总和的条形图，那么您需要一个普通的 fake group。这是相同的计算，但名为 .all() 的方法 returns 具有单个元素的数组是 key/value 对：

function sum_peaks_group(group) {
  return {
    all: () => ([{
      key: 'All',
      value: d3.sum(group.all(), ({value}) => d3.max(Object.values(value)))
    }])
  };
}

当没有过滤器应用于 DC.js 图表时，有条件的自定义 X 值暗淡名称

Conditional custom X Value dim name when no filters are applied to DC.js Chart

crossfilter

dc.js

单柱条形图