Как использовать разные цвета для маркировки узлов в Cytoscape. js? - PullRequest
Новая
       60

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

0 голосов
/ 07 апреля 2020

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

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

Например, в приведенном ниже случае, если я выберу «красный», а затем выберу узел «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>

1 Ответ

2 голосов
/ 23 апреля 2020

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

Nonethless, чтобы ответить на ваш вопрос. Вы не используете значение select нигде в своем коде, следовательно, ничего не происходит. В предоставленном вами фрагменте ни один узел не станет зеленым. Существует только orange (состояние по умолчанию) и red (выделенное состояние через класс highlight).

Чтобы получить динамический c цвет фона, вам необходимо использовать либо node.style(property, value) или, что еще лучше, сохраните значение в data и создайте универсальное свойство стиля c, которое применяется, когда узел имеет заданную c точку отсчета. Используя 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 - цвет подсветки никогда не должен использоваться пользователем как опция. Кроме того, вы можете увеличить узлы, чтобы подчеркнуть тот факт, что они выделены / выделены.

...