如何在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 态,而不是自己摸索着上课,除非你真的需要。

Nonethless,回答你的问题。你在你的代码中没有使用select的值,因此,什么都没有发生。在你提供的片段中,没有任何节点变成绿色。只有 orange (默认状态)和 red (通过课件强调的状态 highlight).

为了获得动态的背景色,你需要使用 node.style(property, value) 或者更好的是,将该值存储在 data 并创建一个通用样式属性,当一个节点有一个特定的基准点时,该属性就会被应用。通过使用 data 而不是 style 用户的偏好将持续存在。

这是你更新的代码 https:/codepen.ioRaven0uspenzYvNyJR。

我补充道

{
    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 – 突出显示的颜色不应该作为用户的一个选项。或者,你可以放大节点,以强调它们被高亮选择的事实。

给TA打赏
共{{data.count}}人
人已打赏
未分类

使用内联命名空间进行API版本管理

2022-9-8 7:42:17

未分类

在typecript中访问类属性

2022-9-8 7:42:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索