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