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)

しかし、偽のグループを使用してグループを一定の順序に保つことによって、現在の問題を回避します。実際、少なくともこの例では集約がなく、元のデータポイントを表示したいだけです。

まず、第3のフィールド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; 
     } 
    } 

これは、（配列のコピーを作成し、それはチャートによって要求されていますいつでも元のデータをフェッチします：

は、今、私たちは、インデックスでソートすべてを保つ偽のグループを作成することができますクロスフィルターで）、正しい順序に戻すように並べ替えます。

また、データがクロスフィルタを通過したとしても、それがどのように振舞うかを示す散布図があります。あなたのフィドルの

フォーク：https://jsfiddle.net/gordonwoodhull/mj81m42v/13/

は、[すべてこの後、多分私達は、最初の場所でcrossfilterするデータを与えているべきではありません！元のデータを公開する偽のグループを作成したばかりです。しかし、おそらく、このテクニックにはいくつかの使い道があります。少なくとも、dc.js &クロスフィルタの問題を回避する方法はほとんど常に存在することが証明されています。]