nvd3.js lineWithFocusChart上下文图的范围

时间:2014-04-16 20:54:45

标签: javascript nvd3.js

我是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范围。

我如何获得"混合"如果它们都指向同一个数据变量?

感谢。

0 个答案:

没有答案