用戶移動節點后，如何在Dash / Cytoscape中找到節點的位置？

Question

我在Plotly / Dash中使用Cytoscape，並且正在創建一個簡單的圖形。 然后，我將幾個節點移動到各個位置。 然后，我嘗試在Dash回調中讀取這些位置-我已經嘗試過：

State("cytoscape-graph", "stylesheets")
State("cytoscape-graph", "layout")
State("cytoscape-graph", "elements")
我可以在這里的文檔中找到或多或少的東西

示例節點：

{'data': {'id': 'id0', 'label': 'Node 0'}, 'position': {'x': 50, 'y': 150}},
         {'data': {'id': 'node1', 'label': 'Node 1'}, 'position': {'x': 200, 'y': 100}},
         {'data': {'id': 'node2', 'label': 'Node 2'}, 'position': {'x': 200, 'y': 200}},
         {'data': {'source': 'node0', 'target': 'node1', 'id': '4300352b-9533-4fef-90ec-7a5cbff1f8c4'}},
         {'data': {'source': 'node1', 'target': 'node2', 'id': '33d4c841-bcfc-4a07-ac56-90d36982601a'}},
}

上面的返回None ，不包含任何相關信息的其他任何東西，或者返回初始節點位置。 我嘗試查看渲染的源代碼，但似乎無法在其中找到信息。 僅canvas元素。 即使對於Javascript后端，我也希望能有指針。

Answer 1

編輯：似乎Dash不允許直接訪問... elements（）。jsons（），因此問題的答案是，可能無法純粹使用Dash進行。 每次單擊節點以在javascript中運行該回調並將其輸出到某個隱藏的div，然后在Dash中讀取它時，您可能都必須編寫一個回調。 〜感謝OP回答這個問題

正如本文檔的本節所指出的，這很容易實現。 cy.elements()/nodes()/edges().jsons()獲取集合中所有指定元素的純JavaScript對象表示形式的數組。

 var json; 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: "100px", shape: "rectangle", "background-color": "data(faveColor)" } }, { selector: "edge", css: { "curve-style": "bezier", "control-point-step-size": 40, "target-arrow-shape": "triangle" } } ], elements: { nodes: [{ data: { id: "Top", faveColor: "#2763c4" } }, { data: { id: "yes", faveColor: "#37a32d" } }, { data: { id: "no", faveColor: "#2763c4" } }, { data: { id: "Third", faveColor: "#2763c4" } }, { data: { id: "Fourth", faveColor: "#56a9f7" } } ], edges: [{ data: { source: "Top", target: "yes" } }, { data: { source: "Top", target: "no" } }, { data: { source: "no", target: "Third" } }, { data: { source: "Third", target: "Fourth" } }, { data: { source: "Fourth", target: "Third" } } ] }, layout: { name: "dagre" } })); cy.ready(function() { console.log('Nodes:', cy.nodes().jsons()); console.log('Edges:', cy.edges().jsons()); console.log('Elements:', cy.elements().jsons()); }); document.getElementById('save').addEventListener('click', function() { json = cy.json(); }); document.getElementById('load').addEventListener('click', function() { cy.json(json); });

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

 <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://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js"> </script> <!-- cyposcape dagre --> <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> <b id="save" style="cursor: pointer; color: darksalmon">Save graph</b> / <b id="load" style="cursor: pointer; color: darkmagenta">Load graph</b> <div id="cy"></div> </body> </html>

用戶移動節點后，如何在Dash / Cytoscape中找到節點的位置？

問題描述

1 個解決方案

解決方案1
0 已采納 2019-06-07 09:27:34

用戶移動節點后，如何在Dash / Cytoscape中找到節點的位置？

問題描述

1 個解決方案

解決方案1 0 已采納 2019-06-07 09:27:34

解決方案1
0 已采納 2019-06-07 09:27:34