javascript - 如何使用不同的颜色来标记 cytoscape.js 中的节点?
问题描述
目前我正在尝试实现这个功能:
我在网站上创建了一个颜色选择器。一旦用户选择了特定的颜色,他/她选择的节点及其相邻节点的颜色将变为点击后选择的颜色。
例如,在下面的例子中,如果我选择“red”,然后选择节点“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
(default state) 和red
(highlighted state via class highlight
)。
为了获得动态背景颜色,您需要使用其中一个node.style(property, value)
或更好,将值存储在其中data
并创建一个通用样式属性,该属性在节点具有特定基准时应用。通过使用data
而不是style
用户偏好将持续存在。
这是您更新的代码 - https://codepen.io/Raven0us/pen/zYvNyJR
我添加了
{
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 - 突出显示颜色永远不应作为用户的选项。或者,您可以放大节点以强调它们被突出显示/选中的事实。
推荐阅读
- android - 离子应用程序的 Android 版本的屏幕尺寸与预期不同 - 与浏览器不匹配
- python-3.x - QuickSight 仪表板未显示在用户控制台中?
- go - 堆栈跟踪中指定的时间是什么意思?
- android - 如何使用导航组件(例如触发 HTTP 401 时)清除后台堆栈中的每个片段并发送到登录片段
- c++ - 启用静态检查以进行持续评估
- ios - 范围滑块问题
- ios - 当底部工作表通过手势到达屏幕底部附近时,我想关闭底部工作表
- javascript - TypeError:使用 Onpress 导航后无法读取未定义的属性“导航”
- javascript - 如何在reactjs的渲染功能中有条件地使用开关切换
- azure-pipelines - 如何在 Classic Azure DevOps Pipeline 中存储 AWS CLI 命令的结果