Javascript InfoVis SpaceTree `ST.select()` メソッドによるノードの折りたたみを防ぐにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/4223415

質問

私は JavaScript InfoVis Toolkit を使用しています。特に、 スペースツリー 視覚化。

ツリー全体を展開して、特定のリーフ ノードからルートに戻るパスを表示する必要があります。

ツリーは問題なく展開できましたが、リーフ ノードを選択し、ルートに戻るパスを強調表示することで問題が発生しています。

私が使用しているのは、 ST.select(node, onComplete) 関数を使用して関心のあるリーフ ノードを選択すると、ルート (線とノード) に戻るパスが強調表示されます。

これを行うために、私は onBeforePlotNode そして onBeforePlotLine ST.Controller ノードをルートとそのプロットラインまでハイライトできるようにするメソッド:

onBeforePlotNode: function(node){  
  //add some color to the nodes in the path between the  
  //root node and the selected node.  
  if (node.selected) {  
    node.data.$color = "#dddddd";  
  } else {  
    delete node.data.$color;  
  }  
},
onBeforePlotLine: function(adj){
  if (adj.nodeFrom.selected && adj.nodeTo.selected) {
    adj.data.$color = "#33CC33";
    adj.data.$lineWidth = 5;
  } else {
    delete adj.data.$color;
    delete adj.data.$lineWidth;
  }
}

問題は、私が電話したとき、 ST.select() リーフ ノードを強調表示するには、このレベルの下にあるすべての子ノードが折りたたまれ、非表示になります。

これを実際に確認するために、いくつかの例をアップロードしました。

ツリー全体の展開 - リーフが選択されていません
リーフが選択されています - パスは表示されていますが、ノード N2 の下の子はすべて欠落しています

ブラウザ ウィンドウが少し小さい場合は、下にスクロールする必要がある場合があります。

そこで私の質問は、レベル 3 の子 (レベル 1 がルート) を折りたたまずに、JavaScript InfoVis でリーフ ノードからルート ノードまでノードを表示するにはどうすればよいでしょうか?

自分の葉ノードを見つけて、ツリーをルートに戻る方法 (途中でスタイルを設定する) があれば、そうするでしょう。

役に立ちましたか？

解決

すべてのコードを調べて、console.log() 呼び出しとブレークポイントを散乱させた後、見つけました。

それはイニシャルと関係があります onClick 呼び出し、グラフがバックグラウンドで実行されている更新ループであるという事実、およびそれ以外のすべてが実行されるという事実 onClick 無視しているようです busy グラフの状態。

何が起こるのですか

  1. onClick 呼び出され、一連のイベントがトリガーされます。その一部は非同期です
  2. select 多かれ少なかれ同期的に呼び出され、その作業を実行します
  3. onClick ようやく完了しましたが、その副作用の 1 つは、グラフが再展開されることです。
  4. select 設定しました clickedNode そしていま onClick 新しく設定された値を使用して台無しにします

解決

再設計する必要がある select したがって、グラフのビジー状態が考慮されます。 

select: function(id, onComplete) {
    var that = this;
    if (this.busy) {
        window.setTimeout(function() {
            that.select(id, onComplete);

        }, 1);
        return;
    }
    // original select code follows here (remove the old var that = this; assignment)

これですべてです。ビジー状態をチェックし、ビジー状態になるまで選択を遅らせます。 false。これは、他のすべての関数にも適用する必要があります。 onClick これらは外部から呼び出されますが、ここのライブラリ設計者は、何が副作用をもたらし、何が副作用を引き起こさないのかを示すという点で悪い仕事をしました。

他のヒント

「constrained:」を設定してみましたか？STのプロパティに「false」？それで解決しました。

http://thejit.org/static/v20/Docs/files/Visualizations/Spacetree-js.html

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top