如何使用不同的颜色来标记 cytoscape.js 中的节点？答案

【问题标题】：how to use different colors to mark nodes in cytoscape.js?如何使用不同的颜色来标记 cytoscape.js 中的节点？
【发布时间】：2020-07-19 13:20:29
【问题描述】：

目前我正在尝试实现这个功能：

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

例如，在下面的例子中，如果我选择“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>

【问题讨论】：

标签： javascript cytoscape.js cytoscape cytoscape-web

【解决方案1】：

我建议你阅读:selected 状态，不要自己摆弄类，除非你真的需要。

不过，还是要回答你的问题。您没有在代码中的任何地方使用 select 的值，因此没有任何反应。在您提供的 sn-p 中，没有一个节点会变成绿色。只有orange（默认状态）和red（通过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 - 突出显示颜色永远不应作为用户的选项。或者，您可以放大节点以强调它们被突出显示/选中的事实。

【讨论】：