目前我正在尝试实现这个功能。
我在网站上创建了一个颜色选择器。一旦用户选择了一个特定的颜色，他所选择的节点和相邻节点的颜色就会在点击后变成所选择的颜色。
例如，在下面的案例中，如果我选择 "红色"，然后选择 "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 态，而不是自己摸索着上课，除非你真的需要。
Nonethless，回答你的问题。你在你的代码中没有使用select的值，因此，什么都没有发生。在你提供的片段中，没有任何节点变成绿色。只有 orange (默认状态)和 red (通过课件强调的状态 highlight).
为了获得动态的背景色，你需要使用 node.style(property, value) 或者更好的是，将该值存储在 data 并创建一个通用样式属性，当一个节点有一个特定的基准点时，该属性就会被应用。通过使用 data 而不是 style 用户的偏好将持续存在。
这是你更新的代码 https:/codepen.ioRaven0uspenzYvNyJR。
我补充道
{
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 - 突出显示的颜色不应该作为用户的一个选项。或者，你可以放大节点，以强调它们被高亮选择的事实。