javascript - dc.js 折れ線グラフのデータ グループを変更して再描画する

Question

ローカル データベースからの時系列データから初期の dc.js 積み上げ面折れ線グラフを作成しました。すべての計算はデータベース サーバーによって処理され、データは時間間隔 (数分から数時間) で取得されます。使用されるクロスフィルター ディメンションは日付 (ミリ秒のエポック時間で指定) であり、1 つのグラフにまとめてグラフ化される 2 つのグループが含まれます。これら 2 つのグループの値は、選択した時間間隔で平均化されます。これも db サーバーによって行われます。データ セット全体をスクリプトにロードすることは避けたいと思います。

最初のグラフはレンダリングされ、問題なく動作しますが、私のchart.on('zoomed', function(c, f) {..})では、データベースを再度解析して、新しいより正確なデータ セットを取得します。

つまり、グラフを拡大すると短い時間間隔のデータが選択され、縮小すると長い時間間隔のデータが選択されます。

古いデータをクロスフィルターから削除し、新しいデータをクロスフィルターに追加する必要があることを理解しています。ソースはこのスレッドからです。ただし、それを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();
        });