DC.js折线图-未显示折线图

Question

Y维度需要显示"bitrate total“或"bitrate Avg”(如代码所定义)。X维度需要在周范围内显示15分钟间隔。

我可以将数据上载到表中，但不能上载到折线图中。我可以使用.renderDataPoints()在图形上看到点，但看不到线。我检查了数据-找不到任何返回的null/NaN值，没有使用任何旧版本的颜色。

代码可以在https://jsfiddle.net/dani2011/bu2ag0f7/8/中找到。尝试用var数据替换我的CSV，但此时在小提琴中没有显示任何内容。代码作为整体显示在https://groups.google.com/forum/#!topic/dc-js-user-group/MEslyF2RWRI中

任何帮助都将不胜感激。

Answer 1

Here's my go-to-answer for how to put data into a jsFiddle。基本上，将其放在HTML中未使用的标记中是最容易的。bl.ocks.org / blockbuilder.org更容易做到这一点。

这里是您处理以这种方式加载的数据的一个分支：http://jsfiddle.net/gordonwoodhull/bu2ag0f7/17/

我还必须删除列名中的空格，因为这些空格会使d3.csv混淆，并导致BITRATE计算失败。

在renderlet中也有一些零散的代码，它失败了，并抱怨dim不存在。

数据不显示的主要原因是输入组没有生成可用的聚合数据。您的数据在时间上非常接近，因此按周聚合将聚合所有内容。

调试的方法是在图表初始化之前放置断点或console.log，并查看group.all()的结果。

在本例中，bitrateWeekMinIntervalGroupMove和minIntervalWeekBitrateGroup返回一个具有一个键/值对的数组。不能用一个点来画线。:)

看起来您最初希望按15分钟间隔进行聚合，所以让我们开始工作吧。

无论出于什么原因，在crossfilter中有两个级别的聚合，维度级别和组级别。维度将首先在生成密钥时破解，然后组将进一步细化这些密钥。

您的min15函数会将每个时间键映射到它之前的15分钟标记，但它需要分辨率高于15分钟的数据。因此，让我们将这些组放到dateDimension上，它还没有映射到较低的分辨率：

var minIntervalWeekBitrateGroup = dateDimension.group(min15).reduceSum(function (d) {
    return +d.BITRATE
});
var bitrateWeekMinIntervalGroupMove = dateDimension.group(min15).reduce(
...

太好了，现在有30个数据点。它会画出线条。

​

​

我把点变小了一点:)因为在30像素的时候很难看到线条。

使用范围图放大会显示更多的线条：

​

​

在reduce函数(或其他地方)中似乎仍然有小故障，因为当您放大太远时，线条会下降到零，但希望这足以让您再次移动。

我的小提琴叉子：http://jsfiddle.net/gordonwoodhull/bu2ag0f7/25/