5

我仔细查看了 dc.js 的文档，并注意到围绕多系列折线图的一些未解决的问题。

我的数据如下所示：

var data = [
 //['time', 'text', 'temperature', 'count'],
 ['1379952000', 'field_1', 91, 56],
 ['1379952000', 'field_2', 50, 20],
 ['1379952000', 'field_3', 88, 24],
 ['1379952000', 'field_4', 50, 37],
 ['1379953200', 'field_1', 97, 58],
 ['1379953200', 'field_2', 84, 86],
 ['1379953200', 'field_3', 85, 62],
 ['1379953200', 'field_4', 88, 73]
 // etc.
];

一旦它被添加到交叉过滤器，我想制作一个有 4 行的折线图：一个用于“文本”字段的每个值（即“field_1”、“field_2”、“field_3”、“field_4”）。 这个线程表明这样的事情是可能的。按照这里的建议，我想出了这个 gist中的代码。

我不太清楚如何将数据系列分成 4 行。我已经尝试filter在数据上使用，但我一直以一个系列结束，似乎只有其中的所有要点。

您可以在此处查看代码的实时示例：http: //bl.ocks.org/jsundram/6690354

任何帮助将非常感激。

更新：工作代码在这里：http ://bl.ocks.org/jsundram/6728956

4

1 回答 1

4

我发布了一个似乎可行的要点：http: //bl.ocks.org/jrideout/6710590

关键的变化是 compose 功能：

.compose(fields.top(Infinity).map(function(d,fi) {
    var field = d.key;
    return dc.lineChart(time_chart)
        .group({all:function() {
            return time_fields.all().filter(function(d) {
                var f = JSON.parse(d.key)[1];
                return f==field && d.value > 0;});
        }},field)
        .colors(['#1f77b4', '#ff7f0e', '#2ca02c','#d62728'])
        .colorAccessor(function(){return fi;})
        .keyAccessor(dateAcc);
}));

我创建了一个类似组的对象{all:data}，其中包含您的组，但通过键过滤。

编辑： DC 现在正在使用 seriesChart 来自动执行此操作。见： http: //nickqizhu.github.io/dc.js/examples/series.html

于 2013-09-26T06:58:16.520 回答