javascript - dc.js 中的多系列折线图

标签 javascript d3.js data-visualization crossfilter dc.js

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

我有这样的数据:

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”) ). This thread表明这样的事情是可能的。按照建议here我想出了 this gist 中的代码.

我不太明白如何将数据系列分成 4 行。我试过对数据使用 filter,但我总是以一个似乎包含所有要点的系列结束。

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

如有任何帮助,我们将不胜感激。

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

最佳答案

我发布了一个似乎有效的要点分支: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

关于javascript - dc.js 中的多系列折线图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19016970/

相关文章:

javascript - AJAX 成功函数调用成功但未正确更新页面

javascript - 以 coldfusion 形式提交时未选中复选框

javascript - 我们如何在 c3js 中为多组条形图添加条形图之间的空间?

javascript - 对数刻度返回 NaN

javascript - 我可以在 asp.net mvc3 中的 javascript 上使用断点吗?

javascript - 根据 slider 值显示和隐藏元素

javascript - d3.js 链接强度对力图中的链接距离的影响

javascript - 使用外部对象包装 D3 树中节点的文本

r - 如何为 R 中的桑基图准备输入数据?

javascript - Highcharts - 气泡图 - 移动网格线