复杂计数/聚合 dc.js

Question

我正在开发一个仪表板来帮助公司从多个方面分析他们的成本。

我主要在以下时间工作：https://jsfiddle.net/gkke38wk/4/

有些事情我似乎无法开始工作。

显示承包商的唯一 PO 数量：

我已经能够在 Data-Table 上准确显示这一点，正如您在 fiddle 中所见，但出于某种原因，我在 rowChart 上尝试的任何内容都不会显示总采购订单rows, not Unique PO (This is flattened data, and each line item is a row in the datatable, so a PO may have many rows. FOR EXAMPLE, Bill 只提交了一个 PO,但它有两条线。图表显示 Bill 的 (2)。

  contractorChart
        .dimension(contractors)
        .group(contractorGroup)

  contractorChart
        .dimension(uniqueDim)
        .group(contractorGroup)

显示订单总额

在主要工作的数据 Table 上，我希望总计列显示该 PO 所有行的汇总总数，而不仅仅是第一个匹配项。在我的 uniqueDim 函数中，它仅通过聚合唯一的 PO 编号而不是整个 PO 对象来工作。我不确定如何汇总总数。

Answer 1

在 rowCharts 中，显示的键和值完全由组决定。该维度仅用于过滤，因此切换维度不应导致显示值发生任何变化。您需要让您的团队跟踪唯一的 PO 而不是维度。这有点难以正确有效地完成，但我建议使用 Reductio exception aggregation，在这种情况下，只需在图表上定义一个 Reductio reducer 和一个值访问器即可：

  reductio()
    .exception(function(d) { return d.po; })
    .exceptionCount(true)(contractorGroup)      

  contractorChart
        .width(800)
        .height(200)
        .margins({ top: 20, left: 10, right: 10, bottom: 20 })
        .dimension(contractors)
        .group(contractorGroup)
        .ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
        .valueAccessor(function(d) { return d.value.exceptionCount; })
        .label(function (d) {
            return d.key;
        })
        .title(function (d) {
            return d.value;
        })
        .elasticX(true)
        .xAxis().ticks(4);

就数据 table 而言，您按照 dc.js 常见问题解答中的建议创建 "fake dimension" 的想法是正确的，但实际上您想要一个具有聚合的假维度价值。所以它基于一个组：

var uniqueDim = {
    bottom: function (num) {
      var pos = poDimension.top(Infinity);
      // Uses top because the version of Crossfilter being used
      // doesn't support group.bottom.
      return poGroup.top(num)
        .filter(function(d) { return d.value > 0; })
        .map(function(d) {
            var currPo = pos.filter(function(g) { return g.po === d.key; })[0];
          return {
            po: d.key,
            total: d.value,
            contractor: currPo.contractor,
            complexity: currPo.complexity
          };
      });
    }
  };

两者的工作示例：https://jsfiddle.net/33228p1d/2/

Answer 2

试试下面的代码：

contractorChart
    .width(800)
    .height(200)
    .margins({ top: 20, left: 10, right: 10, bottom: 20 })
    .dimension(contractors)
    .group(contractorGroup)
    .ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
    .label(function (d) {
        return d.key;
    })
    .title(function (d) {
        return d.value;
    })
    .elasticX(true)
    .xAxis().ticks(4);

一个小的补充，例如：

contractorChart
    .width(800)
    .height(200)
    .margins({ top: 20, left: 10, right: 10, bottom: 20 })
    .dimension(contractors)
    .group(contractorGroup)
    .ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
    .label(function (d) {
        return d.key;
    })
    .title(function (d) {
        return d.value.exceptionCount;
    })
    .elasticX(true)
    .xAxis().ticks(4);

复杂计数/聚合 dc.js

Complex Tallies / Aggregation dc.js

d3.js

crossfilter

dc.js