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

D3.js DC.js折线图-未显示任何线条,d3.js,linechart,dc.js,D3.js,Linechart,Dc.js,需要在折线图中显示线条,能够移动平铺、查看最大比特率值线、查看悬停时的标签和轴指针,并使用表格和时间滑块分组。Y维度需要显示“比特率总计”或“比特率平均值”(如代码中所定义)。X维度需要在周范围内显示15分钟的间隔 我可以将数据上传到表格中,但不能上传到折线图中。我可以使用.renderDataPoints()查看图形上的点,但没有线条。 我检查了数据-找不到任何返回的null/NaN值,没有使用任何旧版本的颜色 代码可以在中找到。试图用var数据替换我的CSV,但此时小提琴中没有显示任何内容。

需要在折线图中显示线条,能够移动平铺、查看最大比特率值线、查看悬停时的标签和轴指针,并使用表格和时间滑块分组。Y维度需要显示“比特率总计”或“比特率平均值”(如代码中所定义)。X维度需要在周范围内显示15分钟的间隔

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

代码可以在中找到。试图用var数据替换我的CSV,但此时小提琴中没有显示任何内容。整个代码显示在
https://groups.google.com/forum/#!主题/dc js用户组/MEslyF2RWRI

任何帮助都将不胜感激

。基本上,将其粘贴到HTML中未使用的标记中是最简单的。bl.ocks.org/blockbuilder.org更容易做到这一点

这里是一个以这种方式加载数据的工具:

我还必须删除列名中的空格,因为这些空格将
d3.csv
混淆,导致
比特率计算失败

renderlet中也有一些杂散代码,该代码因投诉
dim
不存在而失败

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

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

在本例中,BitrateWeeKMiniIntervalGroupMove和MiniIntervalWeeKbitrateGroup返回一个带有一个键/值对的数组。不能用一个点绘制直线。:)

看起来您最初希望按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函数(或其他地方)中似乎仍然存在小故障,因为当您放大太远时,线条会下降到零,但希望这足以让您再次移动


我的叉子:你的帮助是无价的。感谢Gordon的所有解释、时间和代码的实际更改-我非常感谢