Javascript 如何更改Cytoscape.js网格中单个节点的颜色

如何更改布局上已存在的节点或边的颜色（不删除/添加它）

我有一个带有预选位置的节点布局，我想更改颜色（节点和边），但不是每个节点（或边）。我已经试过了

cy.style('background-color', 'color');

，它允许更改颜色，但会更改每个节点的颜色

我只想更改一个节点的样式

非常感谢

罗伯特

解释： 嗨，罗伯特，你说得对，

cy.style（）

改变了整个图形的样式。您可能没有注意到的是，您可以具体指定要在哪个元素上执行此函数

关于cytoscape选择器： 如果要选择特定类型的每个元素，可以调用：

cy.elements(); // this returns all edges and nodes
cy.nodes(); // this returns all nodes
cy.edges(); // this returns all edges

如果要获取特定的元素组或特定的元素组，可以执行如下查询：

cy.elements/nodes/edges('[selector =/!= "property"]');   // selector can be id and the property the actual id

解决方案： 要获得解决方案，请执行以下操作：

cy.nodes('[id = "yourId"]').style('background-color', 'desiredColor');

或者将其绑定到事件，idk您的用例是什么：

cy.unbind('click);  // always unbind before binding an event to prevent binding it twiche/multiple times
cy.bind('click', 'node, edge', function(event) {
    let target = event.target;
  if (target.isEdge()) {
    target.style('line-color', 'green');
  } else {
    target.style({
      'background-color': 'white',
      'border-color': 'blue'
    });
  }
});

代码示例： 以下是此方法的工作示例：

var cy=（window.cy=cytoscape({
容器：document.getElementById（“cy”），
boxSelectionEnabled:false，
自动取消选择：true，
风格：[{
选择器：“节点”，
css:{
内容：“数据（id）”，
“文本有效”：“中心”，
“文本halign”：“中心”，
高度：“60px”，
宽度：“60px”，
“边框颜色”：“黑色”，
“背景色”：“灰色”，
“边框不透明度”：“1”，
“边框宽度”：“10px”
}
},
{
选择器：“边缘”，
css:{
“目标箭头形状”：“三角形”
}
},
{
选择器：“边缘[标签]”，
css:{
标签：“数据（标签）”，
“文本旋转”：“自动旋转”，
“text-margin-x”：“0px”，
“text-margin-y”：“0px”
}
},
{
选择器：“：已选定”，
css:{
“背景色”：“黑色”，
“线条颜色”：“黑色”，
“目标箭头颜色”：“黑色”，
“源箭头颜色”：“黑色”
}
}
],
布局：{
名称：“圆圈”
}
}));
变量信息=[{
姓名：“彼得”，
下一个名字：“克莱尔”
},
{
名字：“克莱尔”，
下一个名字：“迈克”
},
{
姓名：“迈克”，
下一个名字：“罗莎”
},
{
姓名：“罗莎”，
下一个名字：“彼得”
}
];
cy.ready（函数（）{
var数组=[]；
//对信息进行一次迭代
对于（变量i=0；i
正文{
字体：14px helvetica neue，helvetica，arial，无衬线；
}
#赛义德{
身高：100%；
宽度：75%；
位置：绝对位置；
左：0；
排名：0；
浮动：左；
}

欢迎使用堆栈溢出！提问前请先阅读和“”。请提供一个显示您的问题的映射器。在样式表中使用带有
ele.data（）
的映射器会更好一些。