병합으로 D3.js (NVD3.js) 데이터 업데이트

Question

NVD3.js.로 빌드 된 일부 실시간 그래프 작업 중입니다. 나는 현재 다음 각 차트를 새로 고침 :

function Chart(svg, qs, chart) { 
    this.qs = qs; 
    this.svg = svg; 
    this.ylabel; 
    this.chart; 
} 

이 상당히 잘 작동하지만, 각 내가 다시 전체 시계열을 가져 오는하고 새로 고침 : 같은

function reDraw(c) { 
    d3.json(c.qs, function(data) { 
     d3.select(c.svg) 
     .datum(data) 
     .transition().duration(500) 
     .call(c.chart); 
    }); 
} 

다 보인다. 최근 요소 만 잡고 각 그래프를 업데이트하는 것이 더 효율적입니다. 요소 추가 (예 :이 대답은 NVD3 line chart with realtime data과 this tutorial)이지만 가장 최근의 요소가 아닌 일부 최신 요소가 업데이트 될 수 있으므로 나에게 이상적이지 않습니다.

그래서 내가 찾고 있어요 것은 횡령이는 가장 최근의 분을 얻으려면 쿼리 문자열 (.qs)를 설정하여 (가장 최근의 분 말, 그 결과를 가지고 다음을 수행하십시오

• 을 업데이트에서 새 X 값은 각 시리즈에있을 때 가장 최근 데이터
• 추가] 및 요소와 각 시리즈에 대해 동일한 x 값이 기존 요소를 덮어 쓰기
• 특정 연령
• 업데이트 과거의 요소에 만료 NVD3.js 스크립트 w 새로운 데이터. 새로운 병합 된 객체로 데이텀을 사용할 수 있습니까?

누구나 위의 병합 작업을 수행하는 우아한 방법을 제안 할 수 있습니까? 기존 데이터 객체는 다음과 같습니다

> d3.select(perf.svg).data()[0] 
[ 
Object 
key: "TrAvg" 
values: Array[181] 
__proto__: Object 
, 
Object 
key: "RedisDurationMsAvg" 
values: Array[181] 
__proto__: Object 
, 
Object 
key: "SqlDurationMsAvg" 
values: Array[181] 
__proto__: Object 
] 
> d3.select(perf.svg).data()[0][0]['values'][0] 
Object {x: 1373979220000, y: 22, series: 0} 
> d3.select(perf.svg).data()[0][1]['values'][0] 
Object {x: 1373979650000, y: 2, series: 1} 

이 목적은 같을 것입니다 반환 (단, 아마 6 각 개체에 대한 요소 또는 그렇게 될 것 제외) 다음이에서

> d3.json(perf.qs, function(data) { foo = data }) 
Object {header: function, mimeType: function, response: function, get: function, post: function…} 
> foo 
[ 
Object 
, 
Object 
, 
Object 
] 
> foo[0] 
Object {key: "TrAvg", values: Array[181]} 
> foo[0]['values'][0] 
Object {x: 1373980220000, y: 49} 

시리즈 가치가없는 새로운 객체 - 추가해야 할 수도 있고 아니면 D3에서 수행 할 수도 있습니까?

Answer 1

당분간 linq.js를 사용하여이 작업을 수행 한 다음 .datum()을 사용하여 매번 새로운 데이터 세트를 바인딩합니다. 이 솔루션은 그다지 우아하지 않지만 작동하는 것처럼 보입니다.

function reDraw2(c, partial) { 
    if (partial) { 
     qs = c.qs.replace(/minago=[0-9]+/, "minago=1") 
    } else { 
     qs = c.qs 
    } 
    d3.json(qs, function(new_data) { 
     chart = d3.select(c.svg) 
     if (c.ctype == "ts" && partial) { 
      thirtyminago = new Date().getTime() - (60*30*1000); 
      old_data = chart.data()[0] 
      var union = new Array(); 
      for (var i = 0; i < old_data.length; i++) { 
       var existing = Enumerable.From(old_data[i]['values']); 
       var update = Enumerable.From(new_data[i]['values']); 
       oldfoo = existing 
       newfoo = update 
       var temp = {} 
       temp['key'] = old_data[i]['key'] 
       temp['values'] = update.Union(existing, "$.x").Where("$.x >" + thirtyminago).OrderBy("$.x").Select().ToArray(); 
       union[i] = temp 

      } 
      chart.datum(union) 
     } else { 
      chart.datum(new_data) 
     } 
     chart.call(c.chart) 
    });