我是nvd3和d3的新手。
我试图使用lineWithFocusChart示例。
我需要修改它并绑定到实时源但我想保持焦点图表从初始值开始(在我的情况下为0)并使用100个值范围内的实时值更新上下文图表;
我的代码是:
var chart;
var data =
[
{
name: 'Acc X',
key: 'AccX',
values: [
[]]
},
{
name: 'Acc Y',
key: 'AccY',
values: [
[]]
},
{
name: 'Acc Z',
key: 'AccZ',
values: [
[]]
}
];
var dataReset = data;
window.data = data;
function addAccGraph() {
nv.addGraph(function() {
chart = nv.models.lineWithFocusChart();
chart.xAxis
.tickFormat(d3.format(',10f'));
chart.x2Axis
.tickFormat(d3.format(',10f'));
chart.yAxis
.tickFormat(d3.format(',.3f'));
chart.y2Axis
.tickFormat(d3.format(',.3f'));
//chart.x2Axis.forceX([0]);
d3.select('#menuOutput svg')
.datum(data)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
window.chartAcc = chart;
return chart;
});
var x = 2;
window.runAcc = false;
setInterval(function(){
if (!window.runAcc) return;
var spike = (Math.random() > 0.95) ? 10: 1;
data[0].values.push({
x: x,
y:Math.sin(x) * spike
});
data[1].values.push({
x: x,
y: Math.cos(x) * spike
});
data[2].values.push({
x: x,
y:Math.atan(x) * spike
});
/*if (data[0].values.length > 10) {
data[0].values.shift();
}
if (data[1].values.length > 10) {
data[1].values.shift();
}
if (data[2].values.length > 10) {
data[2].values.shift();
}*/
x++;
//chart.brushExtent([0,chart.data("max")]).update();
//chart.xAxis.scale([0,100]);
//chart.xAxis.forceX([0]);
//chart.xAxis.domain([0,100]);
//d3.select('nv-context').chart.xAxis.scale().domain([0,100]);
//chart.xAxis.scale().domain([0,100]);
//chart.xAxis.scale(axisScale);
//chart.scale([0,100]);
//console.log(chart.axis.isOrdinal);
chart.update();
//console.log(chart.xAxis);
}, 100);
}
我获得的是图表更新并且具有0 - actualValue范围。
我如何获得"混合"如果它们都指向同一个数据变量?
感谢。