2016-05-18 3 views
0

私たちのデータが大きすぎて一度にすべてを表示できないため、現在d3jsバイレベルパーティションを使用しています。私は最初にcssで隠された最後のレイヤーを持つsunburstパーティションを持っていましたが、グラフは毎回同じサイズにならず、私を悩ませました。d3jsバイレベルパーティション:終了と再エンディングなしで特定の部分を更新することは可能ですか?

ユーザーは範囲スライダで値を調整できます。グラフをリアルタイムで更新する必要があります。これは

path.data(partition.nodes) 
       .transition() 
       .duration(1000) 
       .attrTween("d", arcTweenData); 

バイレベルパーティションに似た何かをすることも可能であるサンバーストパーティションでこれを使用して働いていましたか?

これは基本的にこのsunburst partitionですが、バイレベルパーティションを使用するか、2レベルの行のみを表示します(バイレベルパーティションのように)。

は私が最終的に解決策を見つけたSOLUTION

を発見した、バイレベルパーティションが値に加えられた変更で更新されませんので、デフォルトで合計を使用しています。更新する前に値を再度指定すると、私のためにそれを行いました。

path = path.data(partition.value(function (d) { return d.value}).nodes(current).slice(1)); 
     path.transition().duration(750) 
      .attrTween("d", function (d) { return arcTween.call(this, updateArc(d)); }); 

答えて

0

バイレベルは、パーティションにデータ/ノードを読み出して格納するものの、それだけで「子」要素を使用して、2つの層を表示するという意味で、サンバーストと異なっています。 Sunburstはそれらをすべて表示します(デフォルトの子)。

本当に必要なのは、遷移を使用してパスデータを更新/更新することです。

path.transition() 
     .style("fill-opacity", 1) 
     .attrTween("d", function(d) { return arcTween.call(this, updateArc(d)); }); 

あなたはそれが間隔に更新したり、ボタンがクリックされるたびに呼び出される関数内に置き作ることができ:これは簡単に更新したい時はいつでもパス上のトランジションを呼び出すことによって行うことができます。 d値を更新するのではなく、代わりに外部データ変数を更新する場合は、グローバル変数を使用してその新しいデータ値を単に渡すことができます。

function updateVisual(d,newData){ 
path.transition() 
    .style("fill-opacity", 1) 
    .attrTween("d", function(d) { return arcTween.call(this, updateArc(newData));}); 
} // If d is updated, remove newData and use updateArc(d) 

注:これは私が解決策を見つけましたが、おかげでとにかくあなたがバイレベルパーティションに

+0

を使用していると仮定しています。 :) – Superjo149

関連する問題