且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

dc.js - 如何从多个列创建行图表

更新时间:2023-11-17 14:06:23

有趣的问题!它听起来有点类似于枢轴,在此请求交叉过滤器。使用假群组和假维度来解决问题,但是有一些注意事项:

Interesting problem! It sounds somewhat similar to a pivot, requested for crossfilter here. A solution comes to mind using "fake groups" and "fake dimensions", however there are a couple of caveats:



  • 但是,您无法点击图表中的行以筛选其他任何内容(因为它会选择什么记录?)

伪组构造函数如下所示:

The fake group constructor looks like this:

function regroup(dim, cols) {
    var _groupAll = dim.groupAll().reduce(
        function(p, v) { // add
            cols.forEach(function(c) {
                p[c] += v[c];
            });
            return p;
        },
        function(p, v) { // remove
            cols.forEach(function(c) {
                p[c] -= v[c];
            });
            return p;
        },
        function() { // init
            var p = {};
            cols.forEach(function(c) {
                p[c] = 0;
            });
            return p;
        });
    return {
        all: function() {
            // or _.pairs, anything to turn the object into an array
            return d3.map(_groupAll.value()).entries();
        }
    };
}

它所做的是将所有请求的行减少到一个对象,然后将对象转换为数组格式dc.js期望 group.all 返回。

What it is doing is reducing all the requested rows to an object, and then turning the object into the array format dc.js expects group.all to return.

维度到这个构造函数 - 它索引是无关紧要的,因为你不能过滤这些行...但你可能希望它有自己的维度,所以它受所有其他维度过滤器的影响。还给这个构造函数一个你想要转换成组的列数组,并将结果作为你的组。

You can pass any arbitrary dimension to this constructor - it doesn't matter what it's indexed on because you can't filter on these rows... but you probably want it to have its own dimension so it's affected by all other dimension filters. Also give this constructor an array of columns you want turned into groups, and use the result as your "group".

例如

var dim = ndx.dimension(function(r) { return r.a; });
var sidewaysGroup = regroup(dim, ['a', 'b', 'c', 'd']);

完整示例: http://jsfiddle.net/gordonwoodhull/37uET/6/

(请注意如何点击图表会导致坏处,因为,它应该过滤什么?)

(Notice how clicking on the rows in the chart results in badness, because, what is it supposed to filter?)