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

时间:2014-07-14 13:08:40

标签: javascript d3.js dc.js crossfilter

我需要在dc.js中创建一个行图,其中包含csv中多列的输入。所以我需要将列映射到每一行,并将每列的总数映射到行值。 可能有一个明显的解决方案,但我似乎无法找到任何例子。 非常感谢 小号

更新: 这是一个快速草图。为标准道歉 行图;
column1 ----------------- 64(第1列共计)
column2 ------- 35(第2栏共计)
column3 ------------ 45(第3栏总数)

2 个答案:

答案 0 :(得分:5)

有趣的问题!它听起来有点类似于一个支点requested for crossfilter here。使用"假组"可以想到一个解决方案。和"虚假尺寸"但是有一些警告:

  • 它会反映其他维度的过滤器
  • 但是,您将无法点击图表中的行以过滤其他任何内容(因为它会选择哪些记录?)

假组构造函数如下所示:

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返回。

您可以将任意维度传递给此构造函数 - 它的索引并不重要,因为您无法对这些行进行过滤...但您可能希望它具有自己的维度因此受到所有其他维度过滤器的影响。同时为此构造函数提供要转换为组的列数组,并将结果用作" group"。

E.g。

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

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

(注意点击图表中的行会导致错误,因为它应该过滤什么?)

答案 1 :(得分:1)

您在寻找堆叠的行图吗?例如,此图表的每一行代表一个类别,每种颜色代表一个子类别:

enter image description here

不幸的是,DC.js尚不支持此功能。功能请求位于https://github.com/dc-js/dc.js/issues/397。如果您愿意涉及某些非库代码,可以查看该问题日志中引用的示例。

或者,您可以使用可堆叠条形图。这个链接似乎很好地描述了它是如何工作的:http://www.solinea.com/blog/coloring-dcjs-stacked-bar-charts enter image description here