dc.js - 如何从多个列创建行图表
我需要在dc.js中创建一个行图,输入来自csv中的多个列。所以我需要映射一列到每一行,每列的总数到行的值。
这可能有一个明显的解决方案,但我似乎找不到任何例子。
很多谢谢
S
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']);
完整示例: 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?)