需要在折线图中显示折线,能够移动图 block ,查看最大比特率值线,在悬停时查看标签和轴指针,与表格和时间 slider 分组。Y 维度需要显示“总比特率”或“平均比特率”(如代码中定义)。 X维度需要以周为单位显示15分钟的间隔。
我可以将数据上传到表格中,但不能上传到折线图中。我可以使用 .renderDataPoints() 看到图表上的点,但看不到线条。 我检查了数据 - 找不到任何返回的 null/NaN 值,未使用任何旧版本的颜色。
代码可以在 https://jsfiddle.net/dani2011/bu2ag0f7/8/ 中找到。尝试用 var 数据替换我的 CSV,但目前 fiddle 中没有显示任何内容。整个代码显示在 https://groups.google.com/forum/#!topic/dc-js-user-group/MEslyF2RWRI
任何帮助将不胜感激。
最佳答案
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 返回一个包含一个键/值对的数组。一点不能画任何线。 :)
看起来您最初想按 15 分钟的时间间隔进行聚合,所以让我们开始吧。
无论出于何种原因,交叉过滤器中有两个聚合级别:维度级别和组级别。该维度将首先破解生成 key ,然后该小组将进一步完善这些 key 。
您的 min15 函数会将每个时间键映射到其之前的 15 分钟标记,但它需要分辨率高于 15 分钟的数据。因此,让我们将这些组放在尚未映射到较低分辨率的 dateDimension 上:
var minIntervalWeekBitrateGroup = dateDimension.group(min15).reduceSum(function (d) {
return +d.BITRATE
});
var bitrateWeekMinIntervalGroupMove = dateDimension.group(min15).reduce(
...
太好了,现在有 30 个数据点。它画线。
我把点弄小了一点:)因为在 30 像素时很难看到线条。
使用范围图进行放大可显示更多线条:
reduce 函数(或其他地方)似乎仍然存在故障,因为当您放大得太远时,线条会降至零,但希望这足以让您再次移动。
我的 fiddle fork :http://jsfiddle.net/gordonwoodhull/bu2ag0f7/25/
关于d3.js - DC.js 折线图 - 没有显示折线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39109107/