Dash/Cytoscape 嵌套 JSON 选择器样式

Question

So I have a JSON data file that I am using with Dash/Cytoscope:所以我有一个与 Dash/Cytoscope 一起使用的 JSON 数据文件：

    "data": {
        "label": "Customer",
        "properties": {
            "score": 8.0,
        }
    }

I need to compare 'score' with the selector to see if it is bigger than 9. So far I have tried:我需要将“分数”与选择器进行比较，看看它是否大于 9。到目前为止，我已经尝试过：

'selector': 'node[properties[score > 9]]'
'selector': '[score > 9]'
'selector': '[properties[score > 9]]'

Unfortunately nothing has worked so far, just invalid syntax.不幸的是，到目前为止没有任何效果，只是语法无效。

Answer 1

As canbax pointed out, using functions inside the stylesheet should do the trick.正如 canbax 指出的那样，在样式表中使用函数应该可以解决问题。

I added a border-color depending on a nodes score property like this, but you can customize it as you like:我根据这样的节点得分属性添加了border-color ，但您可以根据需要自定义它：

'border-color': function (node) {
    if (node.data('properties').score >= 9) { return 'green'}
    else { return 'black' }
},

 var cy = window.cy = cytoscape({ container: document.getElementById('cy'), boxSelectionEnabled: false, autounselectify: true, style: [{ selector: 'node', css: { 'content': 'data(id)', 'text-valign': 'center', 'text-halign': 'center', 'height': '60px', 'width': '60px', 'border-color': function(node) { if (node.data('properties').score >= 9) { return 'green' } else { return 'black' } }, 'border-opacity': '1', 'border-width': '10px' } }, { selector: '$node > node', css: { 'padding-top': '10px', 'padding-left': '10px', 'padding-bottom': '10px', 'padding-right': '10px', 'text-valign': 'top', 'text-halign': 'center', 'background-color': '#bbb' } }, { selector: 'edge', css: { 'target-arrow-shape': 'triangle' } }, { selector: ':selected', css: { 'background-color': 'black', 'line-color': 'black', 'target-arrow-color': 'black', 'source-arrow-color': 'black' } } ], elements: { nodes: [{ data: { id: 'n0', "properties": { "score": 9.0 } } }, { data: { id: 'n1', "properties": { "score": 10.0 } } }, { data: { id: 'n2', "properties": { "score": 8.0 } } }, { data: { id: 'n3', "properties": { "score": 8.0 } } }, { data: { id: 'n4', "properties": { "score": 8.0 } } }, { data: { id: 'n5', "properties": { "score": 8.0 } } }, { data: { id: 'n6', "properties": { "score": 8.0 } } }, { data: { id: 'n7', "properties": { "score": 8.0 } } }, { data: { id: 'n8', "properties": { "score": 8.0 } } }, { data: { id: 'n9', "properties": { "score": 8.0 } } }, { data: { id: 'n10', "properties": { "score": 8.0 } } }, { data: { id: 'n11', "properties": { "score": 8.0 } } }, { data: { id: 'n12', "properties": { "score": 8.0 } } }, { data: { id: 'n13', "properties": { "score": 8.0 } } }, { data: { id: 'n14', "properties": { "score": 8.0 } } }, { data: { id: 'n15', "properties": { "score": 8.0 } } }, { data: { id: 'n16', "properties": { "score": 8.0 } } } ], edges: [{ data: { source: 'n0', target: 'n1' } }, { data: { source: 'n1', target: 'n2' } }, { data: { source: 'n1', target: 'n3' } }, { data: { source: 'n2', target: 'n7' } }, { data: { source: 'n2', target: 'n11' } }, { data: { source: 'n2', target: 'n16' } }, { data: { source: 'n3', target: 'n4' } }, { data: { source: 'n3', target: 'n16' } }, { data: { source: 'n4', target: 'n5' } }, { data: { source: 'n4', target: 'n6' } }, { data: { source: 'n6', target: 'n8' } }, { data: { source: 'n8', target: 'n9' } }, { data: { source: 'n8', target: 'n10' } }, { data: { source: 'n11', target: 'n12' } }, { data: { source: 'n12', target: 'n13' } }, { data: { source: 'n13', target: 'n14' } }, { data: { source: 'n13', target: 'n15' } }, ] }, layout: { name: 'dagre', padding: 5 } });

 body { font: 14px helvetica neue, helvetica, arial, sans-serif; } #cy { height: 100%; width: 75%; position: absolute; left: 0; top: 0; float: left; }

 <html> <head> <meta charset=utf-8 /> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui"> <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script> <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script> <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script> <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script> </head> <body> <div id="cy"></div> </body> </html>

Dash/Cytoscape 嵌套 JSON 选择器样式

问题描述

1 个解决方案

解决方案1
0 2021-12-22 10:51:48

Dash/Cytoscape 嵌套 JSON 选择器样式

问题描述

1 个解决方案

解决方案1 0 2021-12-22 10:51:48

解决方案1
0 2021-12-22 10:51:48