如何在使用自定义缩减创建的组中使用 top 函数？

Question

在以下场景中： http://jsfiddle.net/rogeraleite/xbd0zpzn/6/

1 - 我想根据前 2 个名字的数量值之和显示柱状图。

2 - 保持多色特性也很重要(red/teal)。这是识别 "approved_flag".

预期结果：我应该将 Mike 和 Firen 显示为前 2 个名字。

我猜是因为 .value 显示为 Object[amount,unapproved]，top 函数没有计算正确的排名。

基于此，我已经在考虑暂时更改 d.value = d.value.amount 以使函数 top(2) 基于 d.value.数量。但是，我不能那样做。我不太确定这是否也是正确的方法。

我正在使用的代码：

var ndx = crossfilter(experiments);
var all = ndx.groupAll();

var nameDimension = ndx.dimension(function (d) { return d.Name; });

var nameGroup = nameDimension.group().reduce(
    function (p, v) { // add
        p.amount += v.amount
        if(!v.approved_flag)
            p.unapproved++;
        return p;
    },
    function (p, v) { // remove
        p.amount -= v.amount
        if(!v.approved_flag)
            p.unapproved--;
        return p;
    },
    function () { // initialize
        return {amount: 0, unapproved: 0};
    }
);

var filterNameGroup = (function(source_group){return{
    all:function(){
    return source_group.top(2).filter(function(d){
        return d.key != "Not mentioned";
    });
  }
}
})(nameGroup)

var chart1 = dc.barChart('#barChart1');
var chart2 = dc.rowChart('#rowChart1')

chart1.width(600)
    .height(250)
    .margins({ top: 10, right: 10, bottom: 20, left: 40 })
    .dimension(nameDimension)
        .group(nameGroup)
    .transitionDuration(500)
        .colors(function(x) { return x; })
    .elasticY(false)
    .brushOn(false)
    .valueAccessor(function (d) {
        return d.value.amount;
    })
    .title(function (d) {
        return "\nNumber of Povetry: " + d.key;
    })
    .colorAccessor(function(d) {
        return (!this.name && d.value.unapproved) ? 'red' : 'teal';
    })
  .x(d3.scale.ordinal().domain(nameDimension.top(Infinity).map(function(d) {return d.Name})))
    .xUnits(dc.units.ordinal)
    .legend(dc.legend().x(45).y(20).itemHeight(8).gap(4))
;


chart2.width(600)
    .height(250)
    .margins({ top: 10, right: 10, bottom: 20, left: 40 })
        .group(filterNameGroup)
    .dimension(nameDimension)
        .colors(function(x) { return x; })
    .valueAccessor(function (d) {
        return d.value.amount;
    })
    .colorAccessor(function(d) {
        return (!this.name && d.value.unapproved) ? 'red' : 'teal';
    })
        .ordering(function(d){return -d.value});


dc.renderAll();

希望你能帮助我。

提前致谢，罗杰·A·L.

Answer 1

我认为您只需要在 nameGroup 上定义一个顺序，以便 Crossfilter 知道如何对组进行排序 - https://github.com/crossfilter/crossfilter/wiki/API-Reference#group_order

nameGroup.order(function(d) { return d.amount; });

如何在使用自定义缩减创建的组中使用 top 函数？

How to use top function in a group created with a custom reduction?

javascript

crossfilter

dc.js