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

本文是小编为大家收集整理的关于如何在cytoscape.js中使用不同的颜色来标记节点?的处理方法,想解了如何在cytoscape.js中使用不同的颜色来标记节点?的问题怎么解决?如何在cytoscape.js中使用不同的颜色来标记节点?问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

目前我正在尝试实现此功能:

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

例如,在下面的情况下,如果我选择"红色",然后选择节点" 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(默认状态)和red(通过class highlight突出显示状态).

为了获得动态背景色,您需要使用node.style(property, value)或更高的方法,请将值存储在data中,并创建一个通用样式属性,该属性在节点具有特定的基准时适用.通过使用data而不是style用户偏好将持续存在.

以下是您的代码更新 - >

我添加了

{
    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-绝对不要将突出显示的颜色作为用户的选项.另外,您可以放大节点,以强调它们被突出/选择的事实.

本文地址:https://www.itbaoku.cn/post/1793847.html