2

JavaScript InfoVis Toolkit、特にSpaceTreeの視覚化を使用しています。

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

ツリーをうまく拡張できましたが、リーフノードを選択し、ルートに戻るパスを強調表示しているため、問題が発生しています。

この関数を使用して、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でリーフノードからルートノードにノードを表示するにはどうすればよいですか？

私のleafeノードを見つけてツリーをルートに戻す方法があれば（途中でスタイルを設定する）、それをやって幸せになるでしょう

4

2 に答える 2

7

そのすべてのコードを掘り下げて、console.log（）呼び出しとブレークポイントで混乱させた後、私はそれを見つけました。

これは、最初の呼び出し、バックグラウンドで実行されている更新ループとしてのグラフ、およびグラフの状態を無視しているように見えるonClickという事実と関係があります。onClickbusy

何が起こるのですか

  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。ここのライブラリ設計者は、副作用があるものとないものを示すという悪い仕事をしました。

于 2010-11-22T14:21:39.237 に答える
1

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

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

于 2012-02-08T11:01:30.713 に答える