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:组未定义。

我不知道此错误的来源,在页面首次加载时定义了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('zoomed“)的目的。

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

相关文章:

javascript - 兼容CSP的图表图形库

javascript - dc.js数字显示小部件

javascript - Git 子模块、切换分支和包含外部 JS 依赖项的推荐方式(天哪)

javascript - ES6 Map 仅返回对象键数组

javascript - 在Google图表中放置两个数组

c# - "tons"点的网络图表?

javascript - 如何使用交叉过滤器从Date的DOW列获取平均值以在条形图中填充

d3.js - DC JS : How to highlight rows in an aggregated data table on click, 类似于条形图?

javascript - 在成对元素上实现 Jquery 的 .each() 函数时遇到问题

javascript - 如何使用 $http POST 和 angular-payments 传递电子邮件地址和 strip token ?