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