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

Question

首先，这是一个简单的fiddle，我为了帮助解决我的问题而做的：

...根据 fiddle 上显示的图表，我要执行的任务是：

将所有者至少有一个 "approved_flag == 0" 的条变成红色（对于此数据，Mike 的条会变成红色）。

看起来很简单，但我还是做不到=/。

我使用的代码：

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

在此先感谢您对我的帮助， --罗杰

Answer 1

您实际上是在为每个组减少两个值，因此您需要自定义减少来执行此操作。有趣的是，您必须跟踪另一个过滤器是否导致最后一个 false approved_flag 从组中删除。但是，一旦您使用自定义缩减，这实际上并不复杂：我们将只计算 false 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 刻度和 return 来自 colorAccessor:

的颜色名称短路

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

您的 fiddle 分支，在此处添加了这些内容： http://jsfiddle.net/gordonwoodhull/6L2kryvq/17/

编辑：更新了 fiddle 和 colorAccessor，因为第一次尝试打破了图例，它传递了一个层而不是数据。

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

How to change bars colors based on a data dimension?

javascript

crossfilter

dc.js