d3.js – NVD3线图与实时数据

我有一个非常简单的线图用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,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);

解决方法

第二回答(评论后)

我看着source for cumulativeLineChart.你可以看到在创建图表时创建的display.y属性.它依赖于私有方法：“indexify”.如果该方法的一些衍生物被公开,那么也许你可以在重绘前做一些像chart.reindexify()这样的事情.

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

第一个答案

我相信cumulativeLineChart有bug.看来,cumulativeLineChart会将一个“display.y”属性动态添加到系列中的数据值.但是,当重新绘制系列中添加新值时,不会重新生成此属性.我不知道如何做到这一点,虽然我是新来的NVD3.

你真的需要一个CumulativeLineChart,还是一条正常的折线图就足够了？如果是这样,我必须对你的代码进行以下更改：

>从cumulativeLineChart更改为lineChart
>从使用数据的二维数组转换为使用数据对象(具有x,y属性)

(我对NVD3不够熟悉,可以预测什么数据格式,2D阵列显然适用于初始加载,但我认为它不能用于后续的重绘,这可能与您所使用的相同问题有关cumulativeLineChart.我认为更改对象会修复cumulativeLineChart,但似乎没有.)

我也改变了以下,虽然不是那么重要：

>修改您的getData函数创建一个新的Date实例,以避免在日期增加时共享引用的意外后果.
>修改更新间隔函数,以y值与getData函数相同的范围内以日(不是几个月)为增量生成新数据.

这是一个工作的jsfiddle与这些变化：

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