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

Question

需要在折线图中显示线条，能够移动图块，查看最大比特率值线，在悬停时查看标签和轴指针，用 table 和时间分组Slider.Y 维度需要显示 "bitrate total" 或 "bitrate Avg"（如代码中所定义）。 X 维度需要在周范围内显示 15 分钟的间隔。

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

代码可以在https://jsfiddle.net/dani2011/bu2ag0f7/8/中找到。试图用 var 数据替换我的 CSV，但目前 fiddle 中没有显示任何内容。整个代码显示在 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 更容易做到这一点。

这是您的 fiddle 的分支，以这种方式加载数据： http://jsfiddle.net/gordonwoodhull/bu2ag0f7/17/

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

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

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

调试方法是在图表初始化前打断点或console.log，然后查看group.all()

的结果

在这种情况下，bitrateWeekMinIntervalGroupMove 和 minIntervalWeekBitrateGroup 返回一个包含一对 key/value 的数组。一点画不出线。 :)

您最初似乎想按 15 分钟的间隔进行聚合，所以让我们开始吧。

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

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

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

很好，现在有 30 个数据点。它画线。

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

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

reduce 函数（或某处）似乎仍然存在故障，因为当您放大得太远时线条会降为零，但希望这足以让您再次移动。

你的 fiddle 我的叉子：http://jsfiddle.net/gordonwoodhull/bu2ag0f7/25/

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

DC.js Line Chart - no line being displayed

linechart

d3.js

dc.js