2010-11-19 5 views
2

JavaScriptのInfoVisツールキット、特にSpaceTreeの視覚化を使用しています。JavascriptのInfoVis SpaceTree `ST.select()`メソッドがノードを折り畳まないようにするにはどうすればよいですか?

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

ツリーはきれいに広がっていますが、それは葉ノードの選択であり、ルートに戻ってパスを強調表示しているので、いくつかの問題を引き起こしています。

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

は、これを行うために、私は私が戻ってルートにノードとそのplotlinesを強調できるようにするために onBeforePlotNodeonBeforePlotLine 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()を呼び出すときにリーフノードを強調することですこのレベルの下にあるすべての子ノードは折りたたまれて隠されています。この動作を確認するには

私は例をいくつアップロードした:ブラウザウィンドウが少し小さいです場合は、下にスクロールする必要があるかもしれません

Full tree expansion - leaf not selected
Leaf selected - path shown, but all children below node N2 missing

を。

私の質問は、レベル3の子供(レベル1がルート)を崩壊させることなく、葉ノードからノードをJavaScript InfoVisのルートノードに戻す方法を示します。

その後、私がやってhappingことと思います私のleafeノードを見つけて(途中でスタイルを設定する)ルートに戻って、ツリーを歩くための方法があった場合は、その

答えて

7

OK、すべてそのコードを掘り乱雑後それはconsole.log()呼び出しとブレークポイントで、私はそれを発見した。

それはinital onClick呼び出し、事実と関係していること、バックグラウンドで実行している更新ループとonClick以外のすべてがグラフのbusy状態を無視しているようだという事実としてグラフ。

  1. onClickが呼ばれると、一連のイベントをトリガし、それらの一部が
  2. selectが同期より以下であり、その作業
  3. onClickをしていると呼ばれている非同期であります何が起こる

    最終的に完了し、その副作用の1つは、グラフを再展開することです。

  4. selectがに設定されています今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以外のすべての機能にも適用する必要があります。ここの図書館設計者は、副作用が何であるかを示す悪い仕事をしました。

+0

あなたはスターです! – Kev

関連する問題