首页 文章

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

提问于
浏览 次
1

需要在折线图中显示线条，能够移动图块，查看最大比特率值线，查看悬停时的标签和轴指针，与表格和时间分组Slider.Y尺寸需要显示“比特率”总“或”比特率平均值“（如代码中所定义） . X维需要在周范围内显示15分钟的间隔 .

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

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

任何帮助将不胜感激 .

d3.js linechart dc.js

1 回答

  • 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/

    我还必须从列名中删除空格，因为那些混淆了 BITRATE 并导致 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/

    回复于

相关问题