실시간 데이터가있는 NVD3 선형 차트

Question

NVD3.js.를 사용하여 작성된 간단한 선형 차트가 있습니다. 나는, 타이머를 기반으로 간단한 다시 그리기를 작성 내가 본 예에서 가져온,하지만 난 오류

catch되지 않은 형식 오류 얻을 것 : 정의되지 않은

JS의 'Y'속성을 읽을 수 없습니다를

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); 

입니다 (주석 후)

Answer 1

두 번째 대답

나는 source for cumulativeLineChart 바라 보았다. 차트 생성 중에 생성 된 display.y 속성을 볼 수 있습니다. 개인적인 방법 인 "색인화"에 의존합니다. 해당 메서드의 파생물이 공개 된 경우 다시 그리기 전에 chart.reindexify()과 같은 작업을 수행 할 수 있습니다.

임시 해결 방법으로 모든 업데이트에서 처음부터 차트를 다시 만들 수 있습니다. 전환을 제거하면 문제가 해결됩니다. 예 jsfiddle : http://jsfiddle.net/kaliatech/PGyKF/.

첫 번째 대답

나는 버그가 cumulativeLineChart에있다 생각합니다. cumulativeLineChart는 시리즈의 데이터 값에 "display.y"속성을 동적으로 추가하는 것으로 보입니다. 그러나 새로 고치기 위해 계열에 새 값이 추가되면이 속성을 다시 생성하지 않습니다. 나는 NVD3를 처음 사용하기는하지만 어쨌든이 작업을 수행하는 것을 알지 못합니다.

정말 CumulativeLineChart가 필요합니까 아니면 정상적인 선형 차트로 충분합니까? X, Y와 (데이터 객체를 사용하여, 데이터의 2 차원 배열을 사용하는

• 변경 선 차트에 cumulativeLineChart 에서
• 변경 : 그렇다면, 나는 당신의 코드를 다음과 같이 변경했습니다 속성)
  • (내가 기대되는 데이터 형식을 지원합니다. 2 차원 배열이 분명 초기 하중 작동 말할 정도로 NVD3에 익숙하지 해요,하지만 난 이후 다시 그리기 위해. 이것은 가능성과 관련이 작동하지 생각 cumulativeLineChart와 동일한 문제가 발생했습니다. 객체로 변경 마땅 것은 물론 cumulativeLineChart를 해결하는 것입니다,하지만 보이지 않았다) 나는 또한 다음을 변경

, 중요 아니지만 :.

• 당신의 GetData의 기능을 수정 에 날짜의 새 인스턴스를 생성하여 날짜가 증가함에 따라 참조를 공유 할 때 예기치 않은 결과가 발생하지 않도록하십시오.

• getData 함수와 같은 범위에있는 y 값을 사용하여 새 데이터를 일 (월이 아닌) 단위로 생성하는 업데이트 간격 함수가 수정되었습니다.

여기에 그 변경 작업 jsfiddle이다 : 나는이 같은 문제로 실행

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

Answer 2

. 나는 이것은 오류를 제거한다

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

에

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

에서 라인에서 Y() 함수를 변경했습니다. 분명히 에러 케이스에 (존재하지 않는) 인덱스 된 값을 표시하지는 않지만, 내 경험에 따르면, 차트는 정의 된 디스플레이로 다시 업데이트되고 올바르게 보인다.

Answer 3

나는 더 나은 해결책이라고 생각하는 것을 발견했습니다. 누적 차트가 처리 중에 y 함수를 설정하기 때문에 문제가 발생합니다. 차트를 새로 고칠 때마다 먼저 올바른 원본 y를 반환하는 기본값으로 되돌립니다. 당신의 다시 그리기 기능으로 업데이트하기 전에이 작업을 수행 : 누적 차트 자체에 대해이 작업을 수행 (새로운 하나를 설정하기 전에 원래의 액세스 기능을 저장하고, 다시 인덱싱하기 전에 다시 넣어) 할 수 있다면

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

더 나은

는 것 . 기회가 생기면 고칠 것입니다.