Как манипулировать данными графика cytoscape.js перед рендерингом

Question

У меня относительно большое количество данных графа (более 1000 узлов, более 2000 ребер). Cytoscape.js не может отобразить этот объем данных, поэтому решил, что буду готовить интерактивные исследования. Я хочу начать с корней графа (это DAG), и пользователь сможет исследовать узлы после нажатия на них.

Я знаю, что могу сделать это за пределами cytoscape.js, но я хотел знать, могу ли я создать коллекцию узлов/краев, с которой я буду манипулировать (удалять все узлы, но корни и их соседи), а затем использовать в качестве источника данных (получить дочерние узлы узлов). Cytoscape упрощает обработку графа, и было бы здорово не изобретать колесо.

Я попытался создать cy.collection на основе данных JSON, которые я кормил на графике, но похоже, что он не принимает тот же формат данных, что и cy.load.

Answer 1

Я смог обойти это, создав два объекта cytoscape. Я загрузит все мои данные графика переменной I называется allcy:

var allcy = cytoscape({ 
    headless: true, 
}); 

Обратите внимание, что это безголовый, поэтому он не будет пытаться оказывать узлы каким-либо образом.

Тогда я создаю нормальный «рабочий» cy вар

var cy = cytoscape({ 
    container: document.getElementById('thegraph'), 
}); 

я загрузить все мои данные в allcy

allcy.load(response); //response is json graph data I got from xmlhttp request 

добавить корни и их окрестности в cy и перезагружать макет.

cy.add(allcy.nodes().roots().closedNeighborhood()); 
    cy.layout(layoutSettings); 

Voila! У меня есть только корневые узлы в моем графике cy. Теперь мне нужно добавить другие узлы от allcy по мере необходимости, но я думаю, что мне это удастся. Надеюсь, это кому-то пригодится.