dc.js - 如何从多列创建行图 [英] dc.js - how to create a row chart from multiple columns

问题描述

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

I need to create a rowchart in dc.js with inputs from multiple columns in a csv. So i need to map a column to each row and each columns total number to the row value. There may be an obvious solution to this but i cant seem to find any examples. many thanks S

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

update: Here's a quick sketch. Apologies for the standard
Row chart;
column1 ----------------- 64 (total of column 1)
column2 ------- 35 (total of column 2)
column3 ------------ 45 (total of column 3)

推荐答案

有趣的问题！这听起来有点类似于枢轴，在此处请求交叉过滤器.我想到了使用假组"和假维度"的解决方案，但有几个警告:

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']);

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

(注意点击图表中的行是如何导致不良的，因为它应该过滤什么?)

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

这篇关于dc.js - 如何从多列创建行图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！