未捕获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与这些变化: