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

标签 javascript d3.js dc.js crossfilter

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

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

最佳答案

有趣的问题!这听起来有点类似于枢轴,requested for crossfilter here .我想到了一个使用“假组”和“假维度”的解决方案,但有几点需要注意:

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

假组构造函数如下所示:

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

您可以将任意维度传递给此构造函数 - 它的索引是什么并不重要,因为您无法过滤这些行...但您可能希望它有自己的维度,以便它受到所有其他维度的影响维度过滤器。也给这个构造函数一个你想要变成组的列的数组,并将结果用作你的“组”。

例如

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

完整示例在这里:https://jsfiddle.net/gordonwoodhull/j4nLt5xf/5/

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

关于javascript - dc.js - 如何从多列创建行图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24737277/

相关文章:

javascript - Douglas Crockford 所说的 'constructed in a different window or frame' 是什么意思?

javascript - D3非圆弧

javascript - Crossfilter 行图表前 10 名

javascript - Dc.js - 具有动态高度的行图

javascript - 同时滑入和滑出

javascript - 如何对 React Data Grid 中的列进行分组?

javascript - 花式盒子2 : Amending call for multiple galleries

javascript - 使用分类 ("active"鼠标悬停时 D3 颜色变化,真)

javascript - 如何/何时将事件监听器附加到d3.js中?

javascript - 交互式图表(由 dc.js 提供)无法正确相互更新