【问题标题】:DC.js Line Chart - no line being displayedDC.js 折线图 - 不显示折线
【发布时间】:2016-08-23 19:18:21
【问题描述】:

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

    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 不存在而失败。

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

    调试的方法是在chart初始化之前放一个断点或者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 个数据点。它会画线。

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

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

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

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

    【讨论】:

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