NVD3折线图与实时数据

Question

我有一个非常简单的折线图,使用NVD3.js编写.我写了一个基于计时器的简单重绘,从我见过的例子中提取,但是我得到了错误

未捕获的TypeError:无法读取未定义的属性"y"

JS是

    var data = [{
        "key": "Long",
        "values": getData()
    }];
    var chart;

    nv.addGraph(function () {
          chart = nv.models.cumulativeLineChart()
                      .x(function (d) { return d[0] })
                      .y(function (d) { return d[1] / 100 })
                      .color(d3.scale.category10().range());

        chart.xAxis
            .tickFormat(function (d) {
                return d3.time.format('%x')(new Date(d))
            });

        chart.yAxis
            .tickFormat(d3.format(',.1%'));

        d3.select('#chart svg')
            .datum(data)
            .transition().duration(500)
            .call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
    });


    function redraw() {
        d3.select('#chart svg')
            .datum(data)
          .transition().duration(500)
            .call(chart);
    }

    function getData() {
        var arr = [];
        var theDate = new Date(2012, 01, 01, 0, 0, 0, 0);
        for (var x = 0; x < 30; x++) {
            arr.push([theDate.getTime(), Math.random() * 10]);
            theDate.setDate(theDate.getDate() + 1);
        }
        return arr;
    }

    setInterval(function () {
        var long = data[0].values;
        var next = new Date(long[long.length - 1][0]);
        next.setMonth(next.getMonth() + 1)
        long.shift();
        long.push([next.getTime(), Math.random() * 100]);
        redraw();
    }, 1500);

Answer 1

第二回答(评论后)

我查看了cumulativeLineChart的来源.您可以看到在创建图表期间创建了display.y属性.它依赖于私有方法:"indexify".如果该方法的某些派生词被公开,那么也许你可以chart.reindexify()在重绘之前做一些事情.

作为临时解决方法,您可以在每次更新时从头开始重新创建图表.如果你删除过渡,这似乎工作正常.示例jsfiddle:http://jsfiddle.net/kaliatech/PGyKF/.

第一个答案

我相信cumulativeLineChart中存在错误.似乎cumulativeLineChart动态地将"display.y"属性添加到系列中的数据值.但是,在将新值添加到重绘的系列中时,它不会重新生成此属性.我不知道为了做到这一点,尽管我是NVD3的新手.

你真的需要CumulativeLineChart,或者正常的折线图是否足够？如果是这样,我必须对您的代码进行以下更改:

• 从cumulativeLineChart更改为lineChart
• 从使用2维数据数组转换为使用数据对象(具有x,y属性)
  • (我对NVD3不太熟悉,无法说明预期的数据格式.二维数组显然适用于初始加载,但我认为它无法用于后续重绘.这可能与您使用cumulativeLineChart时遇到的问题有关我认为改为对象也会修复cumulativeLineChart,但似乎没有.)

我也改变了以下内容,但并不重要:

• 修改了getData函数以创建Date的新实例,以避免在日期增加时共享引用的意外后果.

• 修改了更新间隔函数,以y(天数)为增量生成新数据,y值与getData函数的范围相同.

这是一个工作jsfiddle与这些变化:

• http://jsfiddle.net/kaliatech/4TMMD/