LQ97OP.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.css" type="text/css" />
  4. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis-network.min.js"> </script>
  5. <center>
  6. <h1>None</h1>
  7. </center>
  8. <!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
  9. <script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
  10. <style type="text/css">
  11. #mynetwork {
  12. width: 100%;
  13. height: 750px;
  14. background-color: #333333;
  15. border: 1px solid lightgray;
  16. position: relative;
  17. float: left;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div id = "mynetwork"></div>
  23. <script type="text/javascript">
  24. // initialize global variables.
  25. var edges;
  26. var nodes;
  27. var network;
  28. var container;
  29. var options, data;
  30. // This method is responsible for drawing the graph, returns the drawn network
  31. function drawGraph() {
  32. var container = document.getElementById('mynetwork');
  33. // parsing and collecting nodes and edges from the python
  34. nodes = new vis.DataSet([{"font": {"color": "white"}, "id": "\u5916\u8a9e\u7cfb\u51fa\u8def", "label": "\u5916\u8a9e\u7cfb\u51fa\u8def", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "\u5916\u8a9e\u7cfb\u51fa\u8defptt", "label": "\u5916\u8a9e\u7cfb\u51fa\u8defptt", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "\u5916\u8a9e\u7cfb\u51fa\u8defdcard", "label": "\u5916\u8a9e\u7cfb\u51fa\u8defdcard", "shape": "dot", "size": 10}, {"font": {"color": "white"}, "id": "\u5916\u8a9e\u5b78\u7fd2\u5e73\u53f0\u5dba\u6771", "label": "\u5916\u8a9e\u5b78\u7fd2\u5e73\u53f0\u5dba\u6771", "shape": "dot", "size": 10}]);
  35. edges = new vis.DataSet([{"from": "\u5916\u8a9e\u7cfb\u51fa\u8def", "to": "\u5916\u8a9e\u7cfb\u51fa\u8defptt", "weight": 1}, {"from": "\u5916\u8a9e\u7cfb\u51fa\u8def", "to": "\u5916\u8a9e\u7cfb\u51fa\u8defdcard", "weight": 1}, {"from": "\u5916\u8a9e\u7cfb\u51fa\u8defptt", "to": "\u5916\u8a9e\u7cfb\u51fa\u8defdcard", "weight": 1}]);
  36. // adding nodes and edges to the graph
  37. data = {nodes: nodes, edges: edges};
  38. var options = {
  39. "configure": {
  40. "enabled": false
  41. },
  42. "edges": {
  43. "color": {
  44. "inherit": true
  45. },
  46. "smooth": {
  47. "enabled": false,
  48. "type": "continuous"
  49. }
  50. },
  51. "interaction": {
  52. "dragNodes": true,
  53. "hideEdgesOnDrag": false,
  54. "hideNodesOnDrag": false
  55. },
  56. "physics": {
  57. "enabled": true,
  58. "stabilization": {
  59. "enabled": true,
  60. "fit": true,
  61. "iterations": 1000,
  62. "onlyDynamicEdges": false,
  63. "updateInterval": 50
  64. }
  65. }
  66. };
  67. network = new vis.Network(container, data, options);
  68. return network;
  69. }
  70. drawGraph();
  71. </script>
  72. </body>
  73. </html>