您可以从使用 L 的 initializin cytoscape 开始:
// Initialize cytoscape
cy = window.cy = cytoscape({
container: $('#diagram'),
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: 'random'
},
elements: L,
style: [
{
selector: 'node',
style: {
'shape': 'data(faveShape)',
'content': 'data(DisplayName)',
'height': 'data(faveHeight)',
'width': 'data(faveWidth)',
'background-color': 'data(faveColor)',
'line-color': '#a8eae5',
'font-family': 'Segoe UI,Helvetica Neue,Helvetica,Arial, Verdana',
'font-size': '15px',
}
},
{
selector: 'edge',
style: {
'label': 'data(myLabel)',
'curve-style': 'bezier',
'width': 5,
'opacity': 0.5,
'line-color': '#a8eae5',
'font-size': '12px',
'target-arrow-shape': 'triangle',
'target-arrow-color': '#a8eae5'
}
},
{
selector: '.autorotate',
style: {
'edge-text-rotation': 'autorotate'
}
},
{
selector: 'edge.deactivate',
style: {
'opacity': 0.1,
}
},
{
selector: 'node.deactivated',
style: {
'opacity': 0.1,
}
}
],
});
之后你可以添加所有的边,但是你必须添加一个属性来告诉哪些物种是边。此外,您必须将 deactivated 属性赋予所有节点。
cy.nodes().addClass('deactivated');
cy.add('All the edges you have'); // Write somthing like species : 1 for first species and so on
cy.ready(function () {
cy.edges().addClass('deactivate');
});
这样,您的所有节点都在图表上,它们已褪色,并且您拥有所有边缘。您现在可以定义一个按钮或其他东西并选择正确的组和边缘并删除类:
cy.nodes("[species = '" + num + "']").removeClass(deactivated);
cy.edges("[species = '" + num + "']").removeClass(deactivate);
当你选择另一个组时,你总是可以说:
cy.nodes().addClass(deactivated);
cy.edges().addClass(deactivate);
然后选择正确的。