Question

首先，这是一个简单的小提琴，为了帮助我提出问题：

...根据小提琴上显示的图表，我要做的任务是：

变成红色的业主至少有一个＆＃34; approved_flag == 0＆＃34; （对于这些数据，迈克的酒吧会变红）。

看起来很简单，但我仍然无法做到这一点= /。

我正在使用的代码：

var experiments = [
    { Name: "Mike", amount: 26.9, approved_flag: 1 },
    { Name: "Mike", amount: 2.9, approved_flag: 1 },
    { Name: "Mike", amount: 14.9, approved_flag: 0 },
    { Name: "John", amount: 22.5, approved_flag: 1 },
    { Name: "John", amount: 13.5, approved_flag: 1 },
    { Name: "Firen", amount: 44.3, approved_flag: 1 },
    { Name: "Firen", amount: 24.3, approved_flag: 1 }    
];

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

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

var nameGroup = nameDimension.group().reduceSum(function (d) { return d.amount; });

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

chart1.width(600)
    .height(250)
    .margins({ top: 10, right: 10, bottom: 20, left: 40 })
    .dimension(nameDimension)
    .group(nameGroup)
    .transitionDuration(500)
    .colors('teal')
    .elasticY(false)
    .brushOn(false)
    .valueAccessor(function (d) {
        return d.value;
    })
    .title(function (d) {
        return "\nNumber of Povetry: " + d.key;
    })
    .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));
dc.renderAll();

提前感谢帮助我， --Roger

Answer 1

您实际上为每个组减少了两个值，因此您需要自定义缩减才能执行此操作。有趣的是，您必须跟踪另一个过滤器是否导致从组中删除最后一个错误approved_flag。但是，一旦您使用自定义缩减功能，这实际上并不复杂：我们只会计算错误approved_flag的数量。

使用reductio可能更容易，但这是直接的交叉滤波方式：

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

默认情况下，条形图仅根据堆叠图层指定颜色。对于这个简单的双色情况，我们可以缩短colors比例并返回colorAccessor的颜色名称：

.colors(function(x) { return x; })
.colorAccessor(function(d) {
    return (!this.name && d.value.unapproved) ? 'red' : 'teal';
})

在这里添加以下内容的小提琴： http://jsfiddle.net/gordonwoodhull/6L2kryvq/17/

编辑：更新小提琴和colorAccessor，因为第一次尝试打破传奇，传递图层而不是基准。

如何根据数据维度更改条形颜色？

1 个答案: