10

我有一个使用 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);
4

3 回答 3

11

第二个答案（评论后）

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

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

第一个答案

我相信累积线图有错误。看来，cumulativeLineChart 将“display.y”属性动态添加到系列中的数据值。但是，当将新值添加到系列以进行重绘时，它不会重新生成此属性。尽管我是 NVD3 的新手，但我不知道怎么做。

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

  • 从累积线图更改为线图
  • 从使用二维数据数组更改为使用数据对象（具有 x,y 属性）
    • （我对 NVD3 不够熟悉，无法说出预期的数据格式。2D 数组显然适用于初始加载，但我认为它不适用于后续重绘。这可能与您遇到的同一个问题有关，cumulativeLineChart .我认为更改为对象也会修复累积线图，但似乎没有。）

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

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

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

这是一个带有这些更改的工作jsfiddle：

于 2012-10-02T15:12:19.643 回答
1

我发现了我认为更好的解决方案。出现此问题的原因是累积图表在处理过程中设置了 y 函数。每当您想刷新图表时，首先将其设置回返回正确原始 y 的默认值。在您的重绘功能中，在更新之前执行此操作：

chart.y(function (d) { return d.y; });

Even better would be if the cumulative chart could do this for itself (store the original access function before setting the new one, and put it back before re-indexing). If I get a chance, I'll try to push a fix.

于 2013-11-18T12:51:10.267 回答
0

我遇到了同样的问题。我更改了 y() 函数从

.y(function(d) { return d.display.y })

到

.y(function(d) { return d.display ? d.display.y : d.y })

这消除了错误。显然它不会在错误情况下显示（不存在的）索引值，但根据我的经验，图表会再次更新并定义显示，并且看起来正确。

于 2013-07-29T15:49:42.800 回答