javascript - 更改 dc.js 折线图中的数据组并重新绘制它

标签 javascript charts dc.js crossfilter stacked-area-chart

我根据来自本地数据库的时间序列数据创建了一个初始 dc.js 堆积面积折线图。所有计算均由数据库服务器处理,按时间间隔(几分钟到几小时)抓取数据。使用的交叉过滤器维度是日期(以毫秒纪元时间给出),并包括要在一张图表上一起绘制的 2 个组。这两组中的值是在所选时间间隔内平均的,这也是由数据库服务器完成的,我非常希望避免将整个数据集加载到脚本中。

初始图表呈现并工作得很好,但在我的 chart.on('zoomed', function(c, f) {..}) 中,我再次解析数据库以获取新的、更准确的数据集。

放大图表会选择较小时间间隔中的数据,缩小图表会选择较大时间间隔中的数据。

我知道旧数据需要从交叉过滤器中删除,新数据需要添加到其中,source from this thread.但是,当我将其实现到我的 chart.on('zoomed', function(c,f) {..}) 中时,第一次缩放后它会返回 TypeError: group is undefined

我不明白这个错误是从哪里来的,chart.group(..)是在页面首次加载时定义的。这是我的功能,

    .on('zoomed', function(chart, filter) {
        var nextLower = stackedLine.x().domain()[0];
        var nextUpper = stackedLine.x().domain()[1];
        $.getJSON('/_try_db', {
            lower : Date.parse(nextLower),
            upper : Date.parse(nextUpper)
            }, function(data) {
            stackedLine.expireCache()
                .stack()
                .x(d3.time.scale().domain([Date.parse(nextLower), Date.parse(nextUpper)]))
            ;
            var new_arr = [];
            $.each(data.result, function() {
            new_arr.push({
                "timestamp" : ($.parseJSON(this)).timestamp,
                "running" : ($.parseJSON(this)).running,
                "waiting" : ($.parseJSON(this)).waiting
                });
            });

            dd.filter(null);
            ndx.remove();
            ndx.add(new_arr);

            dc.redrawAll();
        });

最佳答案

我离开它并在第二天回来后就想通了。我在某处读到,不传递任何参数的 chart.stack() 会删除原始组顶部的所有堆叠组。我想我必须做这样的事情,因为如果我不这样做,那么就会在顶部添加一个额外的堆栈,这是我不想要的。但结果是错误,如果您在没有任何参数的情况下调用chart.stack(),它会返回堆叠的组,但是,如果没有任何东西可以接收返回它尝试向堆栈添加一个新组,未定义的组

我只是删除了stackedLine.stack(),并用正确的数据更新了我的图表。我还删除了 stackedLine.x(...) 因为再次设置域将不允许图表多次缩放,这违背了使用 on('缩放”) 首先。

关于javascript - 更改 dc.js 折线图中的数据组并重新绘制它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24873427/

相关文章:

javascript - 使用 Awesomium 在 ASP.NET Web 表单回发后自动下载

Javascript 门面模式从不显示初始设置

javascript - 无法让 Jquery Tabs 按需要工作

javascript - 如何在 silviomoreto 的 Bootstrap-Select 上添加选项值

javascript - 如何制作多个倒计时时钟?

javascript - 用Java截取整个网页

node.js - Dc.js lineChart 失败

d3.js - D3 Chart version 4 Normalized Stacked Bar Chart 从垂直到水平

javascript - 在 Google 图表栏中打印 2 个名称

javascript - 动态更改图表上的 Sprite 文本