как использовать разные цвета для маркировки узлов в cytoscape.js?

в настоящее время я пытаюсь реализовать эту функцию:

Я создал на сайте селектор цветов. Как только пользователь выберет определенный цвет, цвета выбранных им узлов и их соседних узлов будут изменены на цвет, выбранный после нажатия.

Например, в случае ниже, если я выберу «красный», а затем выберу узел «cytoscape», «cytoscape» и «cytoscape.js» будут красными. Теперь, если я изменю цвет на «зеленый», а затем нажму на «test», узел «test» станет зеленым, но «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 cytoscape.js cytoscape-web
person Li Shen    schedule 07.04.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я предлагаю вам прочитать о состоянии :selected и не возиться с классами самостоятельно, если вам это действительно не нужно.

Тем не менее, чтобы ответить на ваш вопрос. Вы не используете значение select нигде в своем коде, поэтому ничего не происходит. В предоставленном вами фрагменте ни один узел никогда не становится зеленым. Есть только 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 - Цвет выделения никогда не должен использоваться в качестве опции для пользователя. В качестве альтернативы вы можете увеличить узлы, чтобы подчеркнуть тот факт, что они выделены / выбраны.

person Ravenous    schedule 23.04.2020