DC.js折线图 - 未显示任何行

时间:2016-08-23 19:18:22

标签: d3.js linechart dc.js

需要在折线图中显示线条,能够移动切片,查看最大比特率值线,查看悬停时的标签和轴指针,与表格和时间分组Slider.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

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:2)

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个数据点。它绘制线条。

squished lines

我把点做得有点小:)因为在30像素处很难看到线条。

使用范围图表放大显示更多行:

enter image description here

在缩小功能(或某处)中似乎仍然存在毛刺,因为当您放大太远时线条会降至零,但希望这足以让您再次移动。

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