|
1 | 1 | <!DOCTYPE html> |
2 | 2 | <html lang="en"> |
| 3 | + |
3 | 4 | <head> |
4 | 5 | <meta charset="UTF-8"> |
5 | 6 | <title>Dependency Graph</title> |
6 | 7 | <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.21.1/cytoscape.min.js"></script> |
7 | 8 | <style> |
8 | 9 | #cy { |
9 | | - width: 800px; |
10 | | - height: 600px; |
| 10 | + width: 100%; |
| 11 | + height: 80vh; |
11 | 12 | border: 1px solid #ccc; |
| 13 | + margin: auto; |
12 | 14 | } |
13 | 15 | </style> |
14 | 16 | </head> |
|
31 | 33 | selector: 'node', |
32 | 34 | style: { |
33 | 35 | 'background-color': function(ele) { |
34 | | - var instability = ele.data('instability'); |
35 | | - if (instability > 0.80) { |
36 | | - return 'red'; |
37 | | - } else if (instability > 0.60) { |
38 | | - return 'orange'; |
39 | | - } else { |
40 | | - return 'green'; |
41 | | - } |
| 36 | + let instability = ele.data('instability'); |
| 37 | + return instability > 0.8 ? '#d9534f' : |
| 38 | + instability > 0.6 ? '#f0ad4e' : |
| 39 | + instability > 0.4 ? '#5bc0de' : '#5cb85c'; |
| 40 | + }, |
| 41 | + 'label': function(ele) { |
| 42 | + const fullId = ele.data('id'); |
| 43 | + return fullId.split('\\').pop(); |
42 | 44 | }, |
43 | | - 'label': 'data(id)', |
44 | | - 'color': 'black', |
45 | | - 'text-valign': 'center' |
| 45 | + 'color': '#333', |
| 46 | + 'font-size': '10px', |
| 47 | + 'text-outline-width': 2, |
| 48 | + 'text-outline-color': '#ffffff', |
| 49 | + 'text-valign': 'center', |
| 50 | + 'text-wrap': 'wrap', |
| 51 | + 'text-max-width': '80px' |
46 | 52 | } |
47 | 53 | }, |
48 | 54 | { |
49 | 55 | selector: 'edge', |
50 | 56 | style: { |
51 | | - 'width': 7, |
52 | | - 'line-color': '#ccc', |
53 | | - 'target-arrow-color': '#ccc', |
| 57 | + 'width': 4, |
| 58 | + 'line-color': '#cccccc', |
| 59 | + 'target-arrow-color': '#cccccc', |
54 | 60 | 'target-arrow-shape': 'triangle', |
55 | | - 'curve-style': 'bezier' |
| 61 | + 'curve-style': 'bezier', |
| 62 | + 'opacity': 0.8 |
56 | 63 | } |
57 | 64 | } |
58 | 65 | ], |
59 | 66 | layout: { |
60 | | - name: 'breadthfirst', |
61 | | - directed: true |
| 67 | + name: 'cose', |
| 68 | + animate: true, |
| 69 | + animationDuration: 500 |
62 | 70 | } |
63 | 71 | }); |
64 | | -
|
65 | | - cy.nodes().forEach(function(ele) { |
66 | | - ele.qtip({ |
67 | | - content: ele.data('id'), |
68 | | - position: { |
69 | | - my: 'top center', |
70 | | - at: 'bottom center' |
71 | | - }, |
72 | | - style: { |
73 | | - classes: 'qtip-bootstrap', |
74 | | - tip: { |
75 | | - width: 16, |
76 | | - height: 8 |
77 | | - } |
78 | | - } |
79 | | - }); |
80 | | - }); |
81 | 72 | </script> |
82 | 73 | </body> |
83 | 74 |
|
|
0 commit comments