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

Question

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

我在网站上创建了一种颜色 select。一旦用户select选择了特定的颜色，点击后节点he/she selected 及其相邻节点的颜色将变为selected 的颜色。

例如，在下面的例子中，如果我select"red"然后选择节点"cytoscape"，"cytoscape"和"cytoscape.js"将都是红色的。现在，如果我将颜色更改为 "green" 然后单击 "test"，"test" 节点将变为绿色，但 "cytoscape" 和 "cytoscape.js" 仍然保持 "red"。有人知道怎么做吗？

谢谢！

这是我的代码：

        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>

Answer 1

我建议您自己阅读 :selected 状态而不是 fiddle 和 classes，除非您真的需要。

不过，回答你的问题。您没有在代码中的任何地方使用 select 的值，因此没有任何反应。在您提供的代码段中，没有节点会变绿。只有 orange（默认状态）和 red（通过 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 覆盖所有内容，以便向用户提供他们已 select 编辑的反馈节点。

还添加了

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 - 高亮颜色永远不应作为用户的一个选项。或者，您可以放大节点以强调它们是 highlighted/selected.

这一事实

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

how to use different colors to mark nodes in cytoscape.js?

javascript

cytoscape

cytoscape-web

cytoscape.js