dc.js - 분산 형 플롯에 데이터를 추가 할 때 데이터 포인트 애니메이션을 방지합니다.

Question

dc.js를 사용하여 실시간 데이터 시각화 (주기적으로 새 데이터가 도착 함)를 구현하려고합니다. 내가 가지고있는 문제는 다음과 같습니다. 새로운 데이터가 플롯에 추가되면, 기존의 포인트는 변경되지 않아도 종종 "춤을 추기 시작합니다". 피할 수 있습니까?

following fiddle은 이것을 설명합니다.

내 생각에 크로스 필터는 데이터를 내부적으로 정렬하므로 차트에서 내부 저장소의 위치 (인덱스)가 변경된 데이터 항목에 대한 포인트가 이동하게됩니다. 데이터는 다음과 같이 추가됩니다.

var data = []; 
var ndx = crossfilter(data) 
setInterval(function() { 
      var value = ndx.size() + 1; 
      if (value > 50) { 
       return; 
      } 
      var newElement = { 
       x: myRandom(), 
       y: myRandom() 
      }; 

      ndx.add([newElement]); 
      dc.redrawAll(); 
     }, 1000); 

아이디어가 있으십니까?

Answer 1

위의 코멘트가 있습니다. dc.js는 키 기능을 사용하여 데이터를 바인딩하여 수정해야하며 문제를 해결하는 가장 좋은 방법은 산란계에서 전환을 사용 중지하는 것입니다. .transitionDuration(0)

그러나 작업이 가능한지 궁금했습니다. 가짜 그룹을 사용하여 그룹을 정해진 순서대로 유지함으로써 현재의 문제를 해결할 수 있습니다. 실제로 최소한 집계가없는이 예제에서는 원본 데이터 요소 만 표시하려고합니다.

먼저 세 번째 필드 인 index을 데이터에 추가합니다. 위의 설명에서 알 수 있듯이, 산점도는 현재 색인에 의해 데이터를 바인딩하고 있으므로 점을 일정한 순서로 유지해야합니다. 아무것도 삽입해야합니다.

 var newElement = { 
     index: value, 
     x: myRandom(), 
     y: myRandom() 
     }; 

다음으로 비닝 및 집계를 통해이 색인을 보존해야합니다. 우리는 키 또는 값 중 하나를 유지하지만, 키를 유지하는 것이 더 맞는 것 같다 수 :

 xyiDimension = ndx.dimension(function(d) { 
     return [+d.x, +d.y, d.index]; 
     }), 
     xyiGroup = xyiDimension.group(); 

원래의 감소가 나에게 이해가되지 않았다, 그래서 그것을 떨어졌다. 각 빈에 속하는 행 수를 계산하는 기본 동작 만 사용합니다. 카운트 수는 포함되어 있으면 1, 그렇지 않으면 0이됩니다. 키에 인덱스를 포함 시키면 독창성을 보장합니다. 원래 키에는 가질 수 없습니다. 원래 소유하고 있기 때문에

var xyiGroupSorted = { 
     all: function() { 
     var ret = xyiGroup.all().slice().sort((a,b) => a.key[2] - b.key[2]); 
     return ret; 
     } 
    } 

이것은 (배열의 복사본을 생성,이 그래프에 의해 요구 된 것 때마다 원래의 데이터를 가져옵니다 :

이제 우리는 인덱스으로 분류 모든 것을 유지하는 가짜 그룹을 만들 수 있습니다 crossfilter를 사용하여) 올바른 순서로 반환하도록 정렬합니다.

데이터가 교차 필터를 통과 했음에도 불구하고 우리는 산산이 음모가 있어야합니다. 당신의 바이올린의

포크 : https://jsfiddle.net/gordonwoodhull/mj81m42v/13/

[모든 후, 아마 우리가 처음에 crossfilter 할 수있는 데이터를 제공하지 말았어야! 우리는 방금 원래 데이터를 노출하는 가짜 그룹을 만들 수있었습니다. 하지만이 기술에 대한 사용법이있을 수 있습니다. 적어도 대부분 dc.js & 크로스 필터의 문제를 해결하는 방법이 있음을 증명할 수 있습니다.]