jQuery springy 关系可视化 · PHP/Python/前端/Linux 等等学习笔记

[TOC] > [github](https://github.com/dhotson/springy) > [home](http://getspringy.com/#getting-started) ## demo ``` <html> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="https://raw.githubusercontent.com/dhotson/springy/master/springy.js"></script> <script src="https://raw.githubusercontent.com/dhotson/springy/master/springyui.js"></script> <canvas id="springydemo" width="640" height="480" /> <script> var graphJSON = { "nodes": [ "Amphitryon", "Alcmene", "Iphicles", "Heracles" ], "edges": [ ["Amphitryon", "Alcmene"], ["Alcmene", "Amphitryon"], ["Amphitryon", "Iphicles"], ["Amphitryon", "Heracles"] ] }; jQuery(function(){ var graph = new Springy.Graph(); graph.loadJSON(graphJSON); var springy = jQuery('#springydemo').springy({ graph: graph }); }); </script> </body> </html> ``` ## 设置样式 `...` 的样式 ie不支持 ``` var nodes=['Dennis', 'Michael', 'Jessica', 'Timothy', 'Barbara','Amphitryon', 'Alcmene', 'Iphicles', 'Heracles']; graph.addNodes(...nodes) //or //graph.addNodes('Dennis', 'Michael', 'Jessica', 'Timothy', 'Barbara') //graph.addNodes('Amphitryon', 'Alcmene', 'Iphicles', 'Heracles'); var edges = [ ['Dennis', 'Michael', {color: '#00A0B0', label: 'Foo bar'}], ['Michael', 'Dennis', {color: '#6A4A3C'}], ['Michael', 'Jessica', {color: '#CC333F'}], ['Jessica', 'Barbara', {color: '#EB6841'}], ['Michael', 'Timothy', {color: '#EDC951'}], ['Amphitryon', 'Alcmene', {color: '#7DBE3C'}], ['Alcmene', 'Amphitryon', {color: '#BE7D3C'}], ['Amphitryon', 'Iphicles'], ['Amphitryon', 'Heracles'], ['Barbara', 'Timothy', {color: '#6A4A3C'}] ] graph.addEdges( ...edges ); ``` ![UTOOLS1572859022988.png](http://yanxuan.nosdn.127.net/793fd76c98e8497795cbc2805187cb2b.png)