将特定的css应用于cytoscape edgehandles中添加的边缘(applying specific css to added edges in cytoscape edgehandles)

我想添加特定的CSS（例如特定的线条颜色）到某些但是所有边缘添加了cytoscape.js-edgehandles.js。

我曾经使用cy.edges（selector）命令将特定的行颜色（红色）应用于带有源（'I'）的边缘。但这仅适用于已存在的边，但不适用于添加的边。

$('#cy').cytoscape({

ready：function（）{

window.cy = this; cy.edges("[source='I']").addClass('red');

}，

elements: { nodes: [ { data: { id: 'I', name: 'Irlande' } }, { data: { id: 'H', name: 'Pays-Bas' } }, { data: { id: 'F', name: 'France' } }, { data: { id: 'L', name: 'Luxembourg' } } ], edges: [ { data: { source: 'I', target: 'F' } }, { data: { source: 'I', target: 'H' } } { data: { source: 'I', target: 'L' } }, { data: { source: 'H', target: 'I' } }, { data: { source: 'H', target: 'F' } }, { data: { source: 'F', target: 'I' } }, { data: { source: 'F', target: 'H' } }, { data: { source: 'F', target: 'L' } }, { data: { source: 'L', target: 'I' } } ] },

}）;

这引出了几个相关的问题：

添加的边缘是否与现有边缘合并？如果答案为“否”，我怎样才能让它们与edge []合并？

cytoscape.js-edgehandles.js中的相关代码是：

var edge = cy.add（$ .extend（true，{group：'edges'，data：{source：source.id（），target：target.id（）}}，options（）。edgeParams（source，target ，0）））。addClass（classes）;

added = added.add( edge ); break; default: target.removeClass('edgehandles-target'); break; // don't add anything } }

谢谢，

Umbolt

I want to add specific CSS (for instance a specific line-color) to certain, but all, edges added with cytoscape.js-edgehandles.js.

I used to cy.edges(selector) command to apply a specific line-color (red) to the edges with source ('I'). But this only works for already existing edges, but not for added edges.

$('#cy').cytoscape({

ready: function(){

window.cy = this; cy.edges("[source='I']").addClass('red');

},

elements: { nodes: [ { data: { id: 'I', name: 'Irlande' } }, { data: { id: 'H', name: 'Pays-Bas' } }, { data: { id: 'F', name: 'France' } }, { data: { id: 'L', name: 'Luxembourg' } } ], edges: [ { data: { source: 'I', target: 'F' } }, { data: { source: 'I', target: 'H' } } { data: { source: 'I', target: 'L' } }, { data: { source: 'H', target: 'I' } }, { data: { source: 'H', target: 'F' } }, { data: { source: 'F', target: 'I' } }, { data: { source: 'F', target: 'H' } }, { data: { source: 'F', target: 'L' } }, { data: { source: 'L', target: 'I' } } ] },

});

This leads me to a couple of related questions:

Do the added edges merge with the existing edges? If the answer is 'no', how can I get them to merge with edges[]?

The relevant code in cytoscape.js-edgehandles.js is :

var edge = cy.add($.extend( true, { group: 'edges', data: { source: source.id(), target: target.id() } }, options().edgeParams(source, target, 0))).addClass(classes);

added = added.add( edge ); break; default: target.removeClass('edgehandles-target'); break; // don't add anything } }

Thanks,

Umbolt

最满意答案

为此，您可以在样式表中使用类。它们将采用样式表中指定的样式，无论它们何时被创建 - 类似于HTML中的CSS样式表。

There are classes you can use in your stylesheet for this purpose. They will take on the style specified in the stylesheet, regardless of when they are created -- similar to CSS stylesheets in HTML.

更多推荐