d3.js - 按聚合划分聚合 (D3/DC/Crossfilter/Reductio)

标签 d3.js dc.js crossfilter reductio

fiddle 引用:https://jsfiddle.net/33228p1d/4/

引用页面上的平均成本图表。使用以下代码呈现图表:

var cpa = ndx.dimension(function (d) {
  return d.location;
});
var cpaGroup = cpa.group().reduceSum(function (d) {
  return d.total;
});

图表本身:(为简洁起见,省略了样式)

cpaChart
    .dimension(cpa)
    .group(cpaGroup)
    .label(function (d) {
        return d.key + " $" + d.value;
    })
    .title(function (d) {
        return d.value;
    })
    .elasticX(true)
    .ordering(function (d) { return -d.value })
    .xAxis().ticks(4);

现在,它准确地显示了FrontBack 位置的总数。

我想要它做的是显示总数除以该位置的唯一 PO 数量,以显示每个位置的平均成本。

例如,对于 Back,我有两个独特的采购订单,总计 396 美元。我希望看到的是 396/2,每个位置的平均成本为 198

最佳答案

如果您仍然愿意使用 Reductio,请跟踪同一组上的 sum 和 exceptionCount,然后将它们划分到 valueAccessor 访问器中:

  var cpaGroup = reductio()
    .sum('total')
    .exception(function(d) { return d.po; })
      .exceptionCount(true)(cpa.group());

  cpaChart
        .width(400)
        .height(200)
        .margins({ top: 20, left: 10, right: 10, bottom: 20 })
        .dimension(cpa)
        .group(cpaGroup)
        .ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
        .label(function (d) {
            return d.key + " $" + (Math.round(d.value.sum / d.value.exceptionCount));
        })
        .title(function (d) {
            return d.value;
        })
        .valueAccessor(function(d) {
            return d.value.sum / d.value.exceptionCount;
        })
        .elasticX(true)
        .ordering(function (d) { return -d.value })
        .xAxis().ticks(4);

示例:https://jsfiddle.net/7wbcref9/

关于d3.js - 按聚合划分聚合 (D3/DC/Crossfilter/Reductio),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36875985/

相关文章:

javascript - D3js强制布局 - 节点之间的渐变线

javascript - 如何在 DC.js 系列图表中为不同的线条绘制不同的线条图案?

javascript - Rowchart 在 dc.js/crossfilter 中只选择一个条形图?

javascript - DC.js根据维度计算平均值

javascript - $location 在使用 d3.js 的 AngularJS 中不起作用

d3.js - 在有界力布局中,链接的节点超出了矩形范围

javascript - 似乎无法从 D3js 工作中获取示例?

d3.js - 范围刷 dc.js d3.js

javascript - DC.js 条形图条形大小调整

javascript - 每天使用 dc.js 进行规模化