Question

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

1 - 我想根据他们金额值的总和显示前两个名字中的栏。

2 - 保持多色功能（红色/蓝绿色）也很重要。这是识别“approved_flag”。

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

我猜是因为.value显示为对象[金额，未批准]，顶部功能无法计算正确的排名。

基于此，我已经考虑暂时改变d.value = d.value.amount，以使函数top（2）基于d.value.amount工作。但是，我做不到。我不太确定它是否也是正确的方式。

我正在使用的代码：

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

我希望你能帮助我。

提前致谢， Roger A L。

Answer 1

我认为您只需要在nameGroup上定义订单，以便Crossfilter知道如何订购论坛 - https://github.com/crossfilter/crossfilter/wiki/API-Reference#group_order

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

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

1 个答案: