如何使用不同的颜色标记cytoscape.js中的节点？ [英] how to use different colors to mark nodes in cytoscape.js?

问题描述

当前，我正在尝试实现此功能：

我已经在网站上创建了颜色选择器。一旦用户选择了特定的颜色，则他/她选择的节点及其相邻节点的颜色将被更改为点击后选择的颜色。

例如，在以下情况下，如果我选择红色，然后选择节点 cytoscape，则 cytoscape和 cytoscape.js将都是红色的。现在，如果我将颜色更改为绿色，然后单击测试，则测试节点将变为绿色，但 cytoscape和 cytoscape.js仍保持为红色。有人知道怎么做吗？

谢谢！

这是我的代码：

  var cy = cytoscape（{container：document.getElementById（ 'cy'），样式：[{选择器：'节点'，样式：{'label'：'data（name）'，'text-valign'：'center'，'color'： white，'text-轮廓颜色'：'橙色'，'文本轮廓宽度'：2，'背景颜色'：'橙色'，}}，{选择器：'边缘'，样式：{'宽度'：2，'线-color'：'灰色'， }}，{选择器：'node.highlight'，样式：{'label'：'data（name）'，'text-valign'：'center'，'color'： white，'text-outline-color '：'red'，'text-outline-width'：2，'background-color'：'red'，}}，{选择器：'node.semitransp'，样式：{'opacity'：'0.5'}} ，]，元素：{节点：[{数据：{id：'desktop'，名称：'Cytoscape'}}}，{数据：{id：'test'，名称：'Test'}}}，{数据：{id ：'js'，名称：'Cytoscape.js'}}，]，边线：[{数据：{源：'桌面'，目标：'js'}}，{数据：{s ource：'js'，目标：'desktop'}}]}，布局：{名称：'cose'，IdealEdgeLength：100，nodeOverlap：20，刷新：20，fit：true，padding：30，randomize：false，componentSpacing ：100，nodeRepulsion：400000，edgeElasticity：100，nestingFactor：5，重力：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完整性= sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8 = crossorigin = anonymous>< / script> < script src = https://unpkg.com/cytoscape/dist/cytoscape.min.js< / script> < title>< / title> < style> #cy {width：auto;高度：500像素；显示：块；背景颜色：＃F5F5F5; } #box {position：absolute;}< / style>< / head>< body> < select id = color_selector> < option value = red> red< / option> < option value =绿色>绿色< / option> < option value = orange> orange< / option> < / select> < div id = cy>< / div>< / body>  

解决方案

我建议您阅读有关：selected 状态的知识，不要自己弄弄类，除非您真的

没什么，要回答您的问题。您不在代码中的任何地方使用select的值，因此什么也没有发生。在您提供的代码段中，没有节点变绿。只有橙色（默认状态）和红色（通过类 highlight突出显示的状态））。

为了获得动态背景色，您需要使用 node.style（property，value ）或更高，将值存储在 data 中，并创建一个通用样式属性，该属性将在节点具有特定基准时应用。通过使用 data 而不是样式，用户首选项将保持不变。

您的代码已更新- https://codepen.io/Raven0us/pen/zYvNyJR

我添加了

  { 
选择器：'node [background_color]'，
样式：{
'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 node = cy。$（'node.highlight'）; 
 node.forEach（node => {
 node.data（'background_color'，e.target.value）; 
节点.removeClass（'highlight'）; //需要删除类以显示更新的背景颜色
}）
}）
   
 
 LE-突出显示的颜色绝对不能作为用户的选项。另外，您可以扩大节点以强调突出显示/选择它们的事实。
 
currently I'm trying to realize this function:

I've created a color selector on the website. Once a user selects a specific color, the colors of nodes he/she selected and their neighbouring nodes will be changed into the color selected after tap. 

For example, in the case below, if I select "red" and then choose the node "cytoscape", the "cytoscape" and the "cytoscape.js" will both be red. Now if I change the color into "green" and then I click on "test", the "test" node will change into green but the "cytoscape" and "cytoscape.js" still remain "red". Does someone know how to do this?

Thank you!

Here is my code:



        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>



解决方案
I suggest you read about the :selected state and not fiddle with classes by yourself, unless you really need to.

Nonethless, to answer your question. You are not using the select's value anywhere in your code, hence, nothing happens. In the snippet you provided, no node ever turns green. There is only orange (default state) and red (highlighted state via class highlight).

In order to obtain a dynamic background-color, you need to use either node.style(property, value) or better yet, store the value in data and create a generic style property that applies when a node has a specific datum. By using data instead of style the user preference will persist.

Here's your code updated - https://codepen.io/Raven0us/pen/zYvNyJR

I added
{
    selector: 'node[background_color]',
    style: {
        'background-color': 'data(background_color)',
        'text-outline-color': 'data(background_color)',
    }
},
node[background-color] means nodes that have background_color within their data set. 

It's important for this to be declared before the highlight styling because you want highlight to override everything, in order to provide the user with feedback that they have selected the nodes.

Also added
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 - The highlighting color should never be featured as an option for the user. Alternatively, you could enlarge the nodes in order to emphasize the fact that they are highlighted/selected.

                        
这篇关于如何使用不同的颜色标记cytoscape.js中的节点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！