本文是小编为大家收集整理的关于如何在cytoscape.js中使用不同的颜色来标记节点？的处理方法，想解了如何在cytoscape.js中使用不同的颜色来标记节点？的问题怎么解决？如何在cytoscape.js中使用不同的颜色来标记节点？问题的解决办法？那么可以参考本文帮助大家快速定位并解决问题。
问题描述
目前我正在尝试实现此功能:
我在网站上创建了一个颜色选择器.一旦用户选择特定的颜色，他/她选择的节点的颜色将在点击后将其相邻节点更改为选择的颜色.
例如，在下面的情况下，如果我选择"红色"，然后选择节点" cytoscape"，" cytoscape"和" cytoscape.js"都将是红色.现在，如果我将颜色更改为"绿色"，然后单击"测试"，则"测试"节点将更改为绿色，但是" cytoscape"和" cytoscape.js"仍然保持"红色".有人知道该怎么做吗?
谢谢！
这是我的代码:
var cy = cytoscape({
container: document.getElementById('cy'),
style: [
{
selector: 'node',
style: {
'label': 'data(name)',
'text-valign': 'center',
'color':"white",
'text-outline-color': 'orange',
'text-outline-width': 2,
'background-color': 'orange',
}
},
{
selector: 'edge',
style: {
'width':2,
'line-color':'grey',
}
},
{
selector: 'node.highlight',
style: {
'label': 'data(name)',
'text-valign': 'center',
'color':"white",
'text-outline-color': 'red',
'text-outline-width': 2,
'background-color': 'red',
}
},
{
selector: 'node.semitransp',
style:{ 'opacity': '0.5' }
},
],
elements: {
nodes: [
{ data: { id: 'desktop', name: 'Cytoscape' } },
{ data: { id: 'test', name: 'Test'} },
{ data: { id: 'js', name: 'Cytoscape.js'} },
],
edges: [
{ data: { source: 'desktop', target: 'js' } },
{ data: { source: 'js', target: 'desktop' } }
]
},
layout: {
name: 'cose',
idealEdgeLength: 100,
nodeOverlap: 20,
refresh: 20,
fit: true,
padding: 30,
randomize: false,
componentSpacing: 100,
nodeRepulsion: 400000,
edgeElasticity: 100,
nestingFactor: 5,
gravity: 80,
numIter: 1000,
initialTemp: 200,
coolingFactor: 0.95,
minTemp: 1.0
},
minZoom:0.5,
maxZoom:3,
motionBlur: true,
wheelSensitivity: 0.05,
});
cy.on('tap', 'node', function(e){
var ele = e.target;
if(cy.elements('node[background-color:orange]')){
cy.elements().difference(ele.outgoers());
ele.addClass('highlight').outgoers().addClass('highlight');
}
});
cy.on('cxttap', 'node', function(e){
var ele = e.target;
ele.removeClass('highlight').outgoers().removeClass('highlight');
});
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<title></title>
<style>
#cy{
width: auto;
height: 500px;
display: block;
background-color: #F5F5F5;
}
#box{position: absolute;}
</style>
</head>
<body>
<select id="color_selector">
<option value="red">red</option>
<option value="green">green</option>
<option value="orange">orange</option>
</select>
<div id="cy"></div>
</body>
推荐答案
我建议您阅读有关:selected状态的信息，而不是独自学习，除非您真的需要.
无人，回答您的问题.您没有在代码中的任何地方使用Select的值，因此什么也不会发生.在您提供的片段中，没有任何节点变成绿色.只有orange(默认状态)和red(通过class highlight突出显示状态).
为了获得动态背景色，您需要使用node.style(property, value)或更高的方法，请将值存储在data中，并创建一个通用样式属性，该属性在节点具有特定的基准时适用.通过使用data而不是style用户偏好将持续存在.
以下是您的代码更新 - >
我添加了
{
selector: 'node[background_color]',
style: {
'background-color': 'data(background_color)',
'text-outline-color': 'data(background_color)',
}
},
node[background-color]是指在其数据集中具有background_color的节点.
对于highlight样式之前，要声明这一点很重要，因为您希望highlight覆盖所有内容，以便为用户提供他们选择节点的反馈.
还添加了
document.getElementById('color_selector').addEventListener('change', (e) => {
let nodes = cy.$('node.highlight');
nodes.forEach(node => {
node.data('background_color', e.target.value);
node.removeClass('highlight'); // need to remove class in order to display the updated background color
})
})
le-绝对不要将突出显示的颜色作为用户的选项.另外，您可以放大节点，以强调它们被突出/选择的事实.
更多相关问答