Dash/Cytoscape 嵌套 JSON 選擇器樣式

Question

所以我有一個與 Dash/Cytoscope 一起使用的 JSON 數據文件：

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

我需要將“分數”與選擇器進行比較，看看它是否大於 9。到目前為止，我已經嘗試過：

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

不幸的是，到目前為止沒有任何效果，只是語法無效。

Answer 1

正如 canbax 指出的那樣，在樣式表中使用函數應該可以解決問題。

我根據這樣的節點得分屬性添加了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