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

【问题标题】：Changing the data group in a dc.js line chart and redrawing it更改 dc.js 折线图中的数据组并重新绘制它
【发布时间】：2014-07-21 19:46:10
【问题描述】：

我根据来自本地数据库的时间序列数据创建了一个初始 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();
        });

【问题讨论】：

你能试着在小提琴中复制这个问题吗？ jsfiddle.net/djmartin_umich/qBr7y 处的代码可以为您提供一个起点（它使用随机数据而不是从服务器中提取数据）。
是的，@DJMartin 说的。上面的代码没有显示对组的任何引用。或者，如果您发布错误的上下文可能会有所帮助 - 这个“组未定义”被抛出？
感谢大家的回复，当我去玩链接的 jsfiddle @DJMartin 时，我想通了。我会发布一个答案。

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

【解决方案1】：

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

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

【讨论】：