我正在研究一些使用 NVD3.js 构建的实时图表。我目前使用以下内容刷新每个图表:
function reDraw(c) {
d3.json(c.qs, function(data) {
d3.select(c.svg)
.datum(data)
.transition().duration(500)
.call(c.chart);
});
}
c看起来像:
function Chart(svg, qs, chart) {
this.qs = qs;
this.svg = svg;
this.ylabel;
this.chart;
}
这工作得很好,但每次刷新我都会再次获取整个时间序列。只抓取最近的元素并更新每个图表会更有效。有通过附加元素来执行此操作的示例(例如,此答案NVD3 line chart with realtime data和本教程),但这对我来说并不理想,因为可能会更新一些不是最新元素的最近元素。
所以我想做的是抓住最近一分钟(通过设置查询字符串(.qs
)只获取最近一分钟,然后获取该结果并执行以下操作:
- 用最新数据覆盖每个系列具有相同 x 值的任何现有元素
- 当每个系列的更新中有新的 x 值时追加和元素
- 过期元素超过一定年龄
- 使用新数据更新 NVD3.js 脚本。也许仍将基准与新的合并对象一起使用?
谁能建议一种优雅的方式来执行上述合并操作?现有数据对象如下所示:
> d3.select(perf.svg).data()[0]
[
Object
key: "TrAvg"
values: Array[181]
__proto__: Object
,
Object
key: "RedisDurationMsAvg"
values: Array[181]
__proto__: Object
,
Object
key: "SqlDurationMsAvg"
values: Array[181]
__proto__: Object
]
> d3.select(perf.svg).data()[0][0]['values'][0]
Object {x: 1373979220000, y: 22, series: 0}
> d3.select(perf.svg).data()[0][1]['values'][0]
Object {x: 1373979650000, y: 2, series: 1}
返回的对象如下所示(除了每个对象可能只有 6 个元素左右):
> d3.json(perf.qs, function(data) { foo = data })
Object {header: function, mimeType: function, response: function, get: function, post: function…}
> foo
[
Object
,
Object
,
Object
]
> foo[0]
Object {key: "TrAvg", values: Array[181]}
> foo[0]['values'][0]
Object {x: 1373980220000, y: 49}
在这个较新的对象中,缺少系列值 - 也许需要添加,或者 D3 可以做到吗?