如何在Cytoscape.js中使用不同的颜色标记节点？
目前我正在尝试实现这个功能：
我在网站上创建了一个颜色选择器。一旦用户选择了特定的颜色，他/她所选择的节点及其邻近节点的颜色将在轻击后改变为所选择的颜色。
例如，在下面的例子中，如果我选择“red”，然后选择节点“cytoscape”，那么“cytoscape”和“cytoscape.js”都将是红色的。现在，如果我将颜色改为“绿色”，然后单击“test”，“test”节点将变为绿色，但“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>共有1个答案
我建议您阅读:selected状态，除非您真的需要，否则不要自己摆弄类。
尽管如此，来回答你的问题。您没有在代码中的任何地方使用SELECT的值，因此，什么也不会发生。在您提供的代码段中，没有一个节点变成绿色。只有橙色（默认状态）和红色（通过类突出显示状态突出显示)。
为了获得动态背景色，您需要使用node.style(property,value)，或者更好的方法是将值存储在data中，并创建一个通用样式属性，当节点具有特定数据时应用该属性。通过使用数据而不是样式，用户首选项将保持不变。
以下是您更新的代码-https://codepen.io/raven0us/pen/zyvnyjr
我补充说
{
selector: 'node[background_color]',
style: {
'background-color': 'data(background_color)',
'text-outline-color': 'data(background_color)',
}
},
节点[background-color]表示在其数据集中包含background_color的节点。
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
})
})
-
我读了一些线来改变这里的颜色。但我的问题有点不同 我使用下面的代码在谷歌地图中设置了一个标记 默认标记颜色为红色，我需要将该红色更改为我所拥有的颜色： 资源-- 怎么做呢？
-
问题内容： 在图中，如何用不同的颜色为高于阈值的所有值上色？像高于均值+标准或均值+ 2 * std的所有内容一样？ 问题答案： 使用a是正确的方法，但是您也可以使用掩码数组在一行代码中完成一个简单的版本： 这样做的弊端在于它会使用过滤后的数据绘制原始数据，因此有时基础曲线可能会显示出来，具体取决于渲染方式。我在这里把红线弄得有点粗，但是我不确定它是否有所作为。好处是，它基本上是一行，阈值为。 这
-
我有一个图标svg喜欢： 它显示很好，但我想在某些情况下改变颜色（如悬停或选择） 我用过： 它不会改变颜色。任何帮助都将不胜感激。
-
“我妈妈有一双蓝眼睛，我爸爸有一双深绿色的眼睛”。我想用JSOUP解析这个句子，并在android textview上用粗体和彩色文本打印出来。这里的“蓝色”是大胆的蓝色。“深绿色”是大胆的颜色。 我需要解析上述html代码，并需要如下显示： 这是一个标题 我母亲有蓝色的眼睛，我父亲有深绿色的眼睛 这是另一个标题 这是一段 下面是我的程序。考虑到文档doc==获取上面的html； 有人能帮我解决吗
-
我很难弄明白为什么传单方法会改变多边形的颜色，而不是我的标记的颜色。 多边形很好： 但是标记不会改变颜色： 我使用Angular和传单一起制作地图（我使用Angular-传单-指令）。 以下是代码的mouseover部分： 当标记get被mouse覆盖时，它会激发，然后尝试调用LeafletEvent.target上的setStyle。我已经安慰了。记录了LeafletEvent，确实有它的目标部