javascript - 如何在 cytoscape.js 中为单独的 onclick 事件对节点进行分组

标签 javascript css css-selectors cytoscape.js

我想在 cytoscape.js 中“标记”节点,这样我就可以为不同的节点组设置不同的点击处理程序。我知道我可以使用他们的 ID 或名称作为选择器,但我想知道我是否可以使用自定义标签来执行此操作?

这是我正在尝试的..

    <style>
        body {
            font-family: helvetica;
            font-size: 14px;
        }

        #cy {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 999;
        }

        h1 {
            opacity: 0.5;
            font-size: 1em;
        }
    </style>

    <script>
        $(function(){

            var cy = window.cy = cytoscape({
                container: document.getElementById('cy'),
                                    textureOnViewport: true,
                                    pixelRatio: 1,

                ready: function(){
                },

                style: [
                    {
                        selector: 'node',
                        css: {
                            'content': 'data(name)',
                            'shape':'data(shape)',
                            'width': 'data(width)',
                            'height': 'data(height)',
                            'border-color': 'data(bordercolor)',
                            'border-width': 'data(borderwidth)',
                            'color': '#fff',
                            'type': 'cat'
                    }
                    },
                    {
                        selector: 'edge',
                        css: {
                            'target-arrow-shape': 'triangle',
                            'content': 'data(label)'
                        }
                    },
                ],


            });




        });

                    $.getJSON('<%= url_for(‘getdata’) %>',
                        function (data) {
                              cy = $('#cy').cytoscape("get");
                              cy.load(data);
                              cy.layout({name: 'cose',           
                                        });

                              cy.$('node[type = “cat”]’).on('click',function(e){
                             //do something  
                                                                  });

                        });



    </script>
</head>

<body>
    <h1>Demo</h1>

    <div id="cy"></div>

</body>

最佳答案

您放错了元素数据并将其放入样式表中。请参阅 JSON 规范:http://js.cytoscape.org/#notation/elements-json

关于javascript - 如何在 cytoscape.js 中为单独的 onclick 事件对节点进行分组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34781285/

相关文章:

jquery - Metro Style Datatable Styling jquery 数据表

html - 如何在 div 之间设置不同的 z-Index?

css - div超过body的高度

css - 这会被称为伪类选择器或相邻选择器吗?

javascript - Checkbox 的 checked 属性绑定(bind) - Polymer

javascript - Angular Material md-contact-chips 自动完成问题

java - 使用 XSL 获取当前页面 URL

javascript - 在 Javascript 中扩展对象数组

html - 如何设置样式但排除类及其子类?

css - 如何在表行元素上使用最后一个子选择器