带有实时数据的 NVD3 折线图

我有一个使用 NVD3.js 编写的非常简单的折线图。我写了一个基于计时器的简单重绘，从我见过的示例中提取，但出现错误

未捕获的类型错误：无法读取未定义的属性“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);

第二个答案（评论后）

我在看累积折线图的来源。您可以看到在图表创建过程中创建了 display.y 属性。它依赖于一个私有方法：“indexify”。如果该方法的某些衍生方法被公开，那么也许你可以做类似的事情chart.reindexify()重画之前。

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

第一个答案

我相信cumulativeLineChart 中存在错误。看来cumulativeLineChart 动态地将“display.y”属性添加到系列中的数据值中。但是，当将新值添加到系列以进行重绘时，它不会重新生成此属性。尽管我是 NVD3 的新手，但我不知道如何让它做到这一点。

您真的需要累积折线图，还是普通折线图就足够了？如果是这样，我必须对您的代码进行以下更改：

• 更改自累积折线图转折线图
• Change from using 2 dimension arrays of data, to using objects of data (with x,y properties)
  • （我对 NVD3 不太熟悉，无法说出需要什么数据格式。2D 数组显然适用于初始加载，但我认为它不适用于后续重绘。这可能与您在cumulativeLineChart 中遇到的相同问题有关.我认为更改为对象也会修复cumulativeLineChart，但似乎并没有。）

我还更改了以下内容，尽管不那么重要：

• 将您的 getData 函数修改为创建日期的新实例以避免随着日期的增加而共享引用带来的意外后果。

• 修改了更新间隔函数，以按天（而不是月）增量生成新数据，其中 y 值与 getData 函数的范围相同。

这是一个包含这些更改的工作 jsfiddle：

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