cytoscape.js 第一次使用记录

[jywahaha]

平时使用的多是https://cytoscape.org/ 中，Windows下的版本，配置好文件，在软件中使用。

但是桌面的软件，有的时候难以实现某些功能，比如需要放在网页中，比如需要作图画出 存在符合点的情况，等等。

因此，今天为了做出复合点的情况，使用了cytoscape.js。其实之前就了解过，后来在使用shiny的时候换了一个包。

https://js.cytoscape.org/ 中有很多demos，这里我参考的是https://github.com/cytoscape/cytoscape.js-cose-bilkent

这个参考的demo网页https://cytoscape.org/cytoscape.js-cose-bilkent/demo-compound.html

可以发现，存在点中包含着点等等。在这些demo网站中，除了可以在github上下载代码以外，在浏览器中F12也可以直接看。

点与线的配置都在中，另外如何让文本显示，在点中心，点上方等等。

style: [
  {
    selector: 'node',
    style: {
      'content': 'data(id)',      
      'text-valign': 'center',
      'text-halign': 'center',
      'background-color': '#ad1a66'
    }
  },


  {
    selector: ':parent',
    style: {
      'content': 'data(id)',
      'text-valign': 'top',
      'text-halign': 'center',
      'background-opacity': 0.333
    }
  },

---

elements: [{ group:'nodes', data:{ id: 'n0'}},
        { group:'nodes', data:{ id: 'n1',parent: 'n3'}},
        { group:'nodes', data:{ id: 'n2',parent: 'n3'}},
        { group:'nodes', data:{ id: 'n3'}},
        { group:'nodes', data:{ id: 'n4', parent: 'n5'}},
        { group:'nodes', data:{ id: 'n5'}},
        { group:'nodes', data:{ id: 'n6',parent: 'n5'}},
        { group:'edges', data:{ id: 'e0', source: 'n0', target: 'n1'} },
        { group:'edges', data:{ id: 'e1', source: 'n1', target: 'n2'} },
        { group:'edges', data:{ id: 'e3', source: 'n0', target: 'n3'} },
        { group:'edges', data:{ id: 'e5', source: 'n2', target: 'n4'} },
       ]

点的组别关系，完全通过在点的属性中的data中，加入parent这个属性。

但是，仍然存在一个问题，就是如上图所示，一个child点，无法有两个partent的属性，也就是上图的N6无法同时存在N3与N5组，且让N3与N5保持独立。

相应的问题今天在github上提交的疑问，希望能够有办法解决，这样的话，我目前的工作完成就是时间问题了，可以走的比较顺，不然后期还得手动拉，是一个费力的活。。