Javascript 在Cytoscape JS中选择节点时更改颜色

我想将选定节点的颜色更改为与预定义背景颜色不同的颜色。但是，只要我在“样式”中为节点定义背景色，该颜色就不会更改为蓝色（默认行为）

以下是我定义的样式：

selector: 'node',
style: {
    'content': 'data(d2)',
    'background-color': '#ccc',
}

有人能帮忙吗？

---

Lazloo对于cytoscape.js来说，这是一件相当简单的事情，我建议您查看中提供的一些示例

这里的重要部分是：selected，如果通过单击选择，则任何组件都具有该属性。您可以在样式表中处理此状态，并添加您想要的任何样式。您还可以将其绑定到

cy.on（）

上，并使用

cy.element（…）.style（）添加样式

一般来说，我建议在cytoscape样式表中添加一个样式：


var cy=window.cy=cytoscape({
容器：document.getElementById（'cy'），
风格：[{
选择器：'节点'，
css:{
“内容”：“数据（id）”，
“text valign”：“center”，
“text halign”：“center”，
“高度”：“60px”，
“宽度”：“60px”
}
},
{
选择器：'：已选定'，
css:{
“背景色”：“钢蓝”，
“线条颜色”：“黑色”，
“目标箭头颜色”：“黑色”，
“源箭头颜色”：“黑色”
}
}
],
要素：{
节点：[{
数据：{
id:'n0'
}
},
{
数据：{
id:'n1'
}
},
{
数据：{
id:'n2'
}
},
{
数据：{
id:'n3'
}
},
{
数据：{
id:'n4'
}
},
{
数据：{
id:'n5'
}
},
{
数据：{
id:'n6'
}
},
{
数据：{
id:'n7'
}
},
{
数据：{
id:'n8'
}
},
{
数据：{
id:'n9'
}
},
{
数据：{
id:'n10'
}
},
{
数据：{
id:'n11'
}
},
{
数据：{
id:'n12'
}
},
{
数据：{
id:'n13'
}
},
{
数据：{
id:'n14'
}
},
{
数据：{
id:'n15'
}
},
{
数据：{
id:'n16'
}
}
],
边缘：[{
数据：{
资料来源：“n0”，
目标：“n1”
}
},
{
数据：{
来源：“n1”，
目标：“n2”
}
},
{
数据：{
来源：“n1”，
目标：“n3”
}
},
{
数据：{
资料来源：“n2”，
目标：“n7”
}
},
{
数据：{
资料来源：“n2”，
目标：“n11”
}
},
{
数据：{
资料来源：“n2”，
目标：“n16”
}
},
{
数据：{
资料来源：“n3”，
目标：“n4”
}
},
{
数据：{
资料来源：“n3”，
目标：“n16”
}
},
{
数据：{
资料来源：“n4”，
目标：“n5”
}
},
{
数据：{
资料来源：“n4”，
目标：“n6”
}
},
{
数据：{
资料来源：“n6”，
目标：“n8”
}
},
{
数据：{
资料来源：“n8”，
目标：“n9”
}
},
{
数据：{
资料来源：“n8”，
目标：“n10”
}
},
{
数据：{
资料来源：“n11”，
目标：“n12”
}
},
{
数据：{
资料来源：“n12”，
目标：“n13”
}
},
{
数据：{
资料来源：“n13”，
目标：“n14”
}
},
{
数据：{
资料来源：“n13”，
目标：“n15”
}
},
]
},
布局：{
名称：“dagre”，
填充：5
}
});
正文{
字体：14px helvetica neue，helvetica，arial，无衬线；
}
#赛义德{
身高：100%；
宽度：100%；
位置：绝对位置；
左：0；
排名：0；
浮动：左；
}
对于cytoscape.js来说，这是一件相当简单的事情，我建议您查看中提供的一些示例

这里的重要部分是：selected，如果通过单击选择，则任何组件都具有该属性。您可以在样式表中处理此状态，并添加您想要的任何样式。您还可以将其绑定到
cy.on（）
上，并使用
cy.element（…）.style（）添加样式

一般来说，我建议在cytoscape样式表中添加一个样式：


var cy=window.cy=cytoscape({
容器：document.getElementById（'cy'），
风格：[{
选择器：'节点'，
css:{
“内容”：“数据（id）”，
“text valign”：“center”，
“text halign”：“center”，
“高度”：“60px”，
“宽度”：“60px”
}
},
{
选择器：'：已选定'，
css:{
“背景色”：“钢蓝”，
“线条颜色”：“黑色”，
“目标箭头颜色”：“黑色”，
“源箭头颜色”：“黑色”
}
}
],
要素：{
节点：[{
数据：{
id:'n0'
}
},
{
数据：{
id:'n1'
}
},
{
数据：{
id:'n2'
}
},
{
数据：{
id:'n3'
}
},
{
数据：{
id:'n4'
}
},
{
数据：{
id:'n5'
}
},
{
数据：{
id:'n6'
}
},
{
数据：{
id:'n7'
}
},
{
数据：{
id:'n8'
}
},
{
数据：{
id:'n9'
}
},
{