在Cytoscape.js中是否有辦法顯示從復合節點到子節點的連接

Question

我正在探索Cytoscape.js的潛力，並想知道是否可以可視化從復合節點（父級）到該節點內子級的連接。

在下面的示例中，我想顯示父節點“ b”與子節點“ a”和“ c”之間的連接，但到目前為止，我還沒有成功。

最小的工作示例在下面給出，可在此處編輯： http : //jsbin.com/lelinaduko/3/edit

    elements: {
        nodes: [
          { data: { id: 'a', parent: 'b' } },
          { data: { id: 'c', parent: 'b' } },
          { data: { id: 'd' } },
          { data: { id: 'e' } },
          { data: { id: 'f', parent: 'e' } },
          { data: { id: 'b' } }
        ],
        edges: [
          { data: { id: 'bd', source: 'b', target: 'd' } },
          { data: { id: 'eb', source: 'e', target: 'b' } },
          { data: { id: 'ca', source: 'c', target: 'a' } },
          { data: { id: 'ab', source: 'a', target: 'b' } },
          { data: { id: 'bc', source: 'b', target: 'c' } }

        ]
      },

 <!DOCTYPE html> <!-- Created using JS Bin http://jsbin.com Copyright (c) 2015 by anonymous (http://jsbin.com/lelinaduko/3/edit) Released under the MIT license: http://jsbin.mit-license.org --> <meta name="robots" content="noindex"> <html> <head> <link href="style.css" rel="stylesheet" /> <meta charset=utf-8 /> <title>Cytoscape.js initialisation</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script> <script src="code.js"></script> <style id="jsbin-css"> body { font: 14px helvetica neue, helvetica, arial, sans-serif; } #cy { height: 100%; width: 100%; position: absolute; left: 0; top: 0; } #info { color: #c88; font-size: 1em; position: absolute; z-index: -1; left: 1em; top: 1em; } </style> </head> <body> <div id="cy"></div> <script id="jsbin-javascript"> $(function(){ // on dom ready var cy = cytoscape({ container: $('#cy')[0], style: cytoscape.stylesheet() .selector('node') .css({ 'content': 'data(id)', 'text-valign': 'center', 'text-halign': 'center', 'color': 'black' }) .selector('$node > node') .css({ 'content': 'data(id)', 'text-valign': 'top', 'text-halign': 'center', 'color': 'blue' }) .selector('edge') .css({ 'target-arrow-shape': 'triangle', 'target-arrow-color': 'black', 'source-arrow-color': 'black', 'line-color': 'red', 'line-style': 'dashed', 'text-valign': 'top', 'text-halign': 'center', 'content': 'data(id)' }) .selector(':selected') .css({ 'background-color': '', 'line-color': 'black', 'target-arrow-color': 'black', 'source-arrow-color': 'black' }), elements: { nodes: [ { data: { id: 'a', parent: 'b' } }, { data: { id: 'c', parent: 'b' } }, { data: { id: 'd' } }, { data: { id: 'e' } }, { data: { id: 'f', parent: 'e' } }, { data: { id: 'b' } } ], edges: [ { data: { id: 'bd', source: 'b', target: 'd' } }, { data: { id: 'eb', source: 'e', target: 'b' } }, { data: { id: 'ca', source: 'c', target: 'a' } }, { data: { id: 'ab', source: 'a', target: 'b' } }, { data: { id: 'bc', source: 'b', target: 'c' } } ] }, layout: { name: 'breadthfirst', directed: false, avoidOverlap: true, padding: 5 } }); }); // on dom ready </script> </body> </html>

Answer 1

看來您發現了一個錯誤：

https://github.com/cytoscape/cytoscape.js/issues/866

如果要在新版本之前解決此問題，請改用干草堆邊緣，因為這些邊緣不受影響。

在Cytoscape.js中是否有辦法顯示從復合節點到子節點的連接

問題描述

1 個解決方案

解決方案1
0 已采納 2015-03-13 21:27:52

在Cytoscape.js中是否有辦法顯示從復合節點到子節點的連接

問題描述

1 個解決方案

解決方案1 0 已采納 2015-03-13 21:27:52

解決方案1
0 已采納 2015-03-13 21:27:52