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

前端之家收集整理的这篇文章主要介绍了d3.js – NVD3线图与实时数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个非常简单的线图用NVD3.js.我写了一个简单的重绘基于计时器,从我看过的例子,从我得到的错误

未捕获TypeError:无法读取未定义的属性“y”

JS是

  1. var data = [{
  2. "key": "Long","values": getData()
  3. }];
  4. var chart;
  5.  
  6. nv.addGraph(function () {
  7. chart = nv.models.cumulativeLineChart()
  8. .x(function (d) { return d[0] })
  9. .y(function (d) { return d[1] / 100 })
  10. .color(d3.scale.category10().range());
  11.  
  12. chart.xAxis
  13. .tickFormat(function (d) {
  14. return d3.time.format('%x')(new Date(d))
  15. });
  16.  
  17. chart.yAxis
  18. .tickFormat(d3.format(',.1%'));
  19.  
  20. d3.select('#chart svg')
  21. .datum(data)
  22. .transition().duration(500)
  23. .call(chart);
  24.  
  25. nv.utils.windowResize(chart.update);
  26.  
  27. return chart;
  28. });
  29.  
  30.  
  31. function redraw() {
  32. d3.select('#chart svg')
  33. .datum(data)
  34. .transition().duration(500)
  35. .call(chart);
  36. }
  37.  
  38. function getData() {
  39. var arr = [];
  40. var theDate = new Date(2012,01,0);
  41. for (var x = 0; x < 30; x++) {
  42. arr.push([theDate.getTime(),Math.random() * 10]);
  43. theDate.setDate(theDate.getDate() + 1);
  44. }
  45. return arr;
  46. }
  47.  
  48. setInterval(function () {
  49. var long = data[0].values;
  50. var next = new Date(long[long.length - 1][0]);
  51. next.setMonth(next.getMonth() + 1)
  52. long.shift();
  53. long.push([next.getTime(),Math.random() * 100]);
  54. redraw();
  55. },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/

猜你在找的JavaScript相关文章