Поиск элемента в D3 — принудительное расположение или дерево

Я написал инструмент, который позволяет просматривать биологические регуляторные сети, показывая две панели SVG рядом друг с другом. Каждая панель содержит сеть транскрипционных факторов (узлов) принудительной компоновки, нарисованную API d3.js. Вы можете ввести название фактора транскрипции, и он будет выделен с использованием того же кода, который используется при возникновении события mouseover. Изучение кода может дать вам некоторое представление о том, как это делается.

Вот суть, которую я составил. Возможно, это важно?

Я разбил свою реализацию на 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]);
        }
     }
}

Я понимаю, что это может быть не самый оптимальный способ сделать это, но эй, работа сделана :)

Я закодировал решение с виджетом поиска на основе select2.
Вы получаете найденные узлы с развернутыми путями, выделенными красным цветом.
Дерево полностью изучено, и можно найти несколько ответов.

Сворачиваемое дерево поиска
https://gist.github.com/PBrockmann/0f22818096428b12ea23

Надеюсь, это поможет
Патрик

Разве вы не просите d3.selectAll ?

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

1. Используйте текстовое поле с кнопкой поиска.
2. Переведите поиск в селектор D3/CSS3 в ваших узлах.
3. d3.выбрать все
4. Примените новые стили к узлам, которые соответствуют или не соответствуют вашему запросу.