dc js - 创建多列维度答案

【问题标题】：dc js - Create Multiple Column Dimensiondc js - 创建多列维度
【发布时间】：2014-02-18 04:57:14
【问题描述】：

我正在尝试使用dc.js 汇总数据表，并且我正在使用dynaTable 插件进行分页和其他选项。

通常在dc.js 数据表中，我们获取数据中显示的整个数据。 But I'm trying to summarize the data like a pivot table and display it on the web and when the selection happens the data table needs to change.

我通过创建dimension 和group 来完成它，并将该组传递给dynaTable。而且运行良好。

假设我有 5 列数据。我可以在它的任何列上创建一个维度。

示例：我在第一列上创建一个维度，并对最后一列的值进行分组，比如A-20, B-42, C-50, D-20.。现在我的组包含该值和变量。

但我希望创建一个包含 2-3 列的维度。

例子：

A,AA,20 A,AB,10 A,AC,30 A,公元,80 乙,文学士,30 B,BB,40 B,BC,50 B,BD,90 C,CA,70 C,CB,20 C,CC,10 C,CD,80 D,DA,30 D,DB,40 D,直流,60 天，天，80

是否可以像这样在多列上创建维度？

如果是这样，请帮助我。

这里是小提琴：http://jsfiddle.net/3v68c/3/

【问题讨论】：

标签： javascript d3.js crossfilter dc.js

【解决方案1】：

如果您提供 JSFiddle 或类似的东西，我可以为您提供一个工作示例。但答案是肯定的，您可以根据需要定义基于任意多列的维度。您只需要有一个未在任何值中使用的分隔符。假设您有 a、b 和 c 列，并且您将使用分隔符 ',' 。那么你：

var xfilter = crossfilter(data); 
var multidimension = xfilter.dimension(function (d) {   
  return d.a + ',' + d.b + ',' + d.c;
});

【讨论】：

嘿 user3206082，我知道你让我看看这个（基于我们之前的帖子），但 Ethan 已经为你指出了正确的方向。如果您正在使用数据构建 DC 图表，您可以确保您的组也将每个字段分开划分。换句话说，使用连接在许多列上定义一个维度，然后将这些列的实际值包含在组中。
@Ethan 为了避免分隔符限制，您可以将维度定义为数组，例如返回 [d.a,d.b,d.c];
@SimonGiles 我认为这通常是正确的，但在 Crossfilter 中发生的 IIRC 是使用 .toString() 强制数组，因此在 Crossfilter 内部它实际上被视为逗号分隔的字符串。我听说过一些关于此转换过程中出现问题的故事，所以我不会告诉其他人使用数组，但我自己偷偷地使用它们 ;-)

【解决方案2】：

我为此在http://jsfiddle.net/djmartin_umich/7R9wd/ 创建了一个jsfiddle。它可以进行一些清理，但它明白了这一点。

1) 使用连接字段创建维度（如 Ethan 建议的那样）。我创建了一个新维度，因为您可能希望您的图表使用仅日期维度。在这种情况下，我在连接之前将日期转换为字符串。

 var dateLableDim = ndx.dimension(function(d) { return parseDate(d3.time.day.floor(d.date)) + " - " + d.label });

2) 将实际日期和标签存储为分组方法的一部分：

var dateDimTotal = dateDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);

    function reduceAdd(p, v) {
        p.date = parseDate(d3.time.day.floor(v.date));
        p.label = v.label;
        ++p.count;
        p.total += v.value;
        if (p.count == 0) {
            p.average = 0;
        } else {
            p.average = p.total / p.count;
        };
        return p;
    }

3) 参考数据表（或动态表）中的那些字段：

var datatable = $('.table').dataTable({
        "aaData" : dateDimTotal.top(Infinity),
        "bDestroy": true,
        "aoColumns": [
            { "mData": function(d) { return d.value.label; }, "sDefaultContent": ""},                
            { "mData": function(d) { return d.value.date; }, "sDefaultContent": ""},
            { "mData": function(d) { return d.value.count; }, "sDefaultContent": ""},
            { "mData": function(d) { return d.value.average; }, "sDefaultContent": ""}
        ]
    })

【讨论】：

【解决方案3】：

您还可以直接在 dc.js 中创建单个维度作为多个关键字段的数组，如果您查看 dc.js Github 上的系列图表的简单特定图表示例，您可以了解这是如何完成的。

【讨论】：