d3.js - D3 で要素を検索 - レイアウトまたはツリーを強制

Question

d3js レイアウト (強制指向またはツリー) で要素を検索し、その要素を強調表示する例はありますか?

ユーザーが検索する値を入力するテキスト フィールドがあると思います。

Answer 1

2 つの SVG パネルを並べて表示する生物学的調節ネットワークを閲覧できるツールを作成しました。各パネルには、d3.js API によって描画される転写因子 (ノード) の強制レイアウト ネットワークが含まれています。mouseover転写因子の名前を入力すると、イベントが発生したときに使用されるのと同じコードを使用して強調表示されます。コードを調べると、それがどのように行われたかについての洞察が得られる場合があります。

Answer 2

これが私が作成した要点です。おそらく関連していますか？

実装を 3 つのステップに分割しました。

1) select2 ボックスでリーフ ノード名を選択すると、searchTree.

$("#search").on("select2-selecting", function(e) {
    var paths = searchTree(root,e.object.text,[]);
    if(typeof(paths) !== "undefined"){
        openPaths(paths);
    }
    else{
        alert(e.object.text+" not found!");
    }
})

2) searchTree は、ルート ノード (パス) からの距離の順にノードの配列を返します。

function searchTree(obj,search,path){
    if(obj.name === search){ //if search is found return, add the object to the path and return it
        path.push(obj);
        return path;
    }
    else if(obj.children || obj._children){ //if children are collapsed d3 object will have them instantiated as _children
       var children = (obj.children) ? obj.children : obj._children;
       for(var i=0;i<children.length;i++){
            path.push(obj);// we assume this path is the right one
            var found = searchTree(children[i],search,path);
            if(found){// we were right, this should return the bubbled-up path from the first if statement
                return found;
            }
            else{//we were wrong, remove this parent from the path and continue iterating
                path.pop();
            }
        }
    }
    else{//not the right object, return false so it will continue to iterate in the loop
        return false;
    }
}

3) 「._children」を「.children」に置き換えてパスを開き、「found」クラスを追加してすべてを赤くします。(リンクとノードのインスタンス化を参照)

function openPaths(paths){
    for(var i=0;i<paths.length;i++){
        if(paths[i].id !== "1"){//i.e. not root
            paths[i].class = 'found';
            if(paths[i]._children){ //if children are hidden: open them, otherwise: don't do anything
                paths[i].children = paths[i]._children;
                paths[i]._children = null;
            }
            update(paths[i]);
        }
     }
}

私はこれがこれを行うための最適な方法ではないかもしれないことを理解していますが、ちょっと、仕事を終わらせます:)

Answer 3

d3.selectAll を求めていませんか?

https://github.com/mbostock/d3/wiki/Selections#wiki-d3_selectAll

1. 検索ボタンのあるテキスト フィールドを使用します。
2. 検索をノードの D3/CSS3 セレクターに変換します。
3. d3.selectAll
4. クエリに一致する/一致しないノードに新しいスタイルを適用します。