【问题标题】:Multi-series line chart in dc.jsdc.js 中的多系列折线图
【发布时间】:2013-09-25 23:41:27
【问题描述】:

我仔细查看了 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” )。 This thread 暗示这样的事情是可能的。按照here 的建议,我想出了this gist 中的代码。

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

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

任何帮助将不胜感激。

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

【问题讨论】:

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


【解决方案1】:

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

关键变化在于撰写功能:

.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

【讨论】:

  • 谢谢!对于左侧的图表,我试图在 X 轴上显示时间并在 y 轴上计数,而不是温度。我想这就是我没有给我的轴贴标签的结果。但我认为这种方法会奏效。当我得到它的工作时,我会发布代码并接受这个答案。
  • 因此,当我在代码中过滤温度(例如,选择 60-90 度的范围)时,折线图的行为非常出乎意料。这些线不再是时间和温度之间的 1:1 映射。你知道这是怎么回事吗?
  • 看起来这是因为d.value > 0 检查。没有它,它似乎工作正常。你为什么要添加那张支票?
  • 我添加了 d.value > 0 因为我正在使用 .defined 方法,将其设置为忽略空值。这样,当您的值为 0 时,您将获得一组不连续的线段,而不是当前的行为,即该线在 x 轴上回到零。但是,由于您的点数很少,通常没有足够的点数可以从 1 个点变为另一个点,因此没有绘制单个点。我放弃了这种方法,但没有特别的原因离开了 d.value。如果您的真实数据数据有更多点,可能仍然值得调查。
  • dc js 看起来很棒;是否仍然可以创建这样的实时图表 - sites.google.com/site/e90e50fx/_/rsrc/1387816462651/home/…