是否可以在 CytoscapeJS 中只为图形的一个节点着色?
Is it possible to color just one node of the graph in CytoscapeJS?
我可以 select 一个特定的节点并用图形其余部分的不同颜色为其着色吗?
谢谢。
有很多方法可以做到。您可以使用 cy.nodes([id="NODE_ID"])
通过其 ID 更改节点的颜色,并设置您想要的任何样式 (more info)。
如果您需要在选择(单击)节点时更改节点的颜色,您可以以类似的方式使用 cy.on('tap', ...)
(more info)。
这是两者的一个小演示:
var eleArray = [
{ group: 'nodes', data: { id: 'N1'} },
{ group: 'nodes', data: { id: 'N2'} },
{ group: 'nodes', data: { id: 'N3'} },
{ group: 'edges', data: { id: 'E0', source: 'N1', target: 'N2' } },
{ group: 'edges', data: { id: 'E1', source: 'N2', target: 'N3' } }
];
var stylesArray = [{
selector: 'node',
style: {'label': 'data(id)'}
}];
var cy = cytoscape({
container: document.getElementById('cy'),
style: stylesArray,
elements: eleArray
});
// Set color of a node by ID
cy.nodes('[id="N2"]').style('background-color', 'red');
// Set color of a node when clicked
cy.on('tap', 'node', function(evt) {
evt.target.style({
'background-color': 'blue'
});
});
#cy {
width: 90%;
height: 200px;
display: block;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.14.1/cytoscape.min.js"></script>
<div id="cy"></div>
请注意我是如何直接将节点 N2
的颜色更改为红色,以及如何在单击节点时将颜色更改为蓝色。
如果您的图形非常复杂,也许更好的方法是将颜色添加为节点的 属性 并在样式定义中使用该 属性 数据。像这样:
// New 'color' property on your nodes
var eleArray = [
{ group: 'nodes', data: { id: 'N1', color: 'red'} }
// ...
];
// Use the property on your styles
var stylesArray = [{
selector: 'node',
style: {'label': 'data(id)', 'background-color': 'data(color)'}
}];
我可以 select 一个特定的节点并用图形其余部分的不同颜色为其着色吗?
谢谢。
有很多方法可以做到。您可以使用 cy.nodes([id="NODE_ID"])
通过其 ID 更改节点的颜色,并设置您想要的任何样式 (more info)。
如果您需要在选择(单击)节点时更改节点的颜色,您可以以类似的方式使用 cy.on('tap', ...)
(more info)。
这是两者的一个小演示:
var eleArray = [
{ group: 'nodes', data: { id: 'N1'} },
{ group: 'nodes', data: { id: 'N2'} },
{ group: 'nodes', data: { id: 'N3'} },
{ group: 'edges', data: { id: 'E0', source: 'N1', target: 'N2' } },
{ group: 'edges', data: { id: 'E1', source: 'N2', target: 'N3' } }
];
var stylesArray = [{
selector: 'node',
style: {'label': 'data(id)'}
}];
var cy = cytoscape({
container: document.getElementById('cy'),
style: stylesArray,
elements: eleArray
});
// Set color of a node by ID
cy.nodes('[id="N2"]').style('background-color', 'red');
// Set color of a node when clicked
cy.on('tap', 'node', function(evt) {
evt.target.style({
'background-color': 'blue'
});
});
#cy {
width: 90%;
height: 200px;
display: block;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.14.1/cytoscape.min.js"></script>
<div id="cy"></div>
请注意我是如何直接将节点 N2
的颜色更改为红色,以及如何在单击节点时将颜色更改为蓝色。
如果您的图形非常复杂,也许更好的方法是将颜色添加为节点的 属性 并在样式定义中使用该 属性 数据。像这样:
// New 'color' property on your nodes
var eleArray = [
{ group: 'nodes', data: { id: 'N1', color: 'red'} }
// ...
];
// Use the property on your styles
var stylesArray = [{
selector: 'node',
style: {'label': 'data(id)', 'background-color': 'data(color)'}
}];