-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
8f9f833
commit d4fd5c9
Showing
1 changed file
with
63 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,85 +1,69 @@ | ||
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | ||
| <html> | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
| <meta http-equiv="Content-Style-Type" content="text/css"> | ||
| <title></title> | ||
| <meta name="Generator" content="Cocoa HTML Writer"> | ||
| <meta name="CocoaVersion" content="2487.7"> | ||
| <style type="text/css"> | ||
| p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} | ||
| p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px} | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Einfacher Graph mit Cytoscape.js</title> | ||
| <script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js"></script> | ||
| <style> | ||
| #cy { | ||
| width: 600px; | ||
| height: 400px; | ||
| border: 1px solid black; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p class="p1"><!DOCTYPE html></p> | ||
| <p class="p1"><html lang="en"></p> | ||
| <p class="p1"><head></p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span><meta charset="UTF-8"></p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span><meta name="viewport" content="width=device-width, initial-scale=1.0"></p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span><title>Einfacher Graph mit Cytoscape.js</title></p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span><script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js"></script></p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span><style></p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>#cy {</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>width: 600px;</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>height: 400px;</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>border: 1px solid black;</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>}</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span></style></p> | ||
| <p class="p1"></head></p> | ||
| <p class="p1"><body></p> | ||
| <p class="p2"><br></p> | ||
| <p class="p1"><h2>Einfaches Graph-Modell</h2></p> | ||
| <p class="p1"><div id="cy"></div></p> | ||
| <p class="p2"><br></p> | ||
| <p class="p1"><script></p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>// Daten für den Graphen (Knoten und Kanten)</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>const graphData = {</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>nodes: [</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>{ data: { id: 'A' } },</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>{ data: { id: 'B' } },</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>{ data: { id: 'C' } },</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>{ data: { id: 'D' } }</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>],</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>edges: [</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>{ data: { source: 'A', target: 'B' } },</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>{ data: { source: 'A', target: 'C' } },</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>{ data: { source: 'B', target: 'D' } },</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>{ data: { source: 'C', target: 'D' } }</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>]</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>};</p> | ||
| <p class="p2"><br></p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>// Initialisierung von Cytoscape</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>const cy = cytoscape({</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>container: document.getElementById('cy'), // Element, in dem der Graph angezeigt wird</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>elements: graphData,</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>style: [ // Styles für die Knoten und Kanten</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>{</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>selector: 'node',</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>style: {</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>'background-color': '#0074D9',</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>'label': 'data(id)',</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>'color': '#fff'</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>}</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>},</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>{</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>selector: 'edge',</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>style: {</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>'width': 3,</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>'line-color': '#FF4136',</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>'target-arrow-color': '#FF4136',</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>'target-arrow-shape': 'triangle'</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>}</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>}</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>],</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>layout: {</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>name: 'grid',</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>rows: 2</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>}</p> | ||
| <p class="p1"><span class="Apple-converted-space"> </span>});</p> | ||
| <p class="p1"></script></p> | ||
| <p class="p2"><br></p> | ||
| <p class="p1"></body></p> | ||
| <p class="p1"></html></p> | ||
|
|
||
| <h2>Einfaches Graph-Modell</h2> | ||
| <div id="cy"></div> | ||
|
|
||
| <script> | ||
| // Daten für den Graphen (Knoten und Kanten) | ||
| const graphData = { | ||
| nodes: [ | ||
| { data: { id: 'A' } }, | ||
| { data: { id: 'B' } }, | ||
| { data: { id: 'C' } }, | ||
| { data: { id: 'D' } } | ||
| ], | ||
| edges: [ | ||
| { data: { source: 'A', target: 'B' } }, | ||
| { data: { source: 'A', target: 'C' } }, | ||
| { data: { source: 'B', target: 'D' } }, | ||
| { data: { source: 'C', target: 'D' } } | ||
| ] | ||
| }; | ||
|
|
||
| // Initialisierung von Cytoscape | ||
| const cy = cytoscape({ | ||
| container: document.getElementById('cy'), // Element, in dem der Graph angezeigt wird | ||
| elements: graphData, | ||
| style: [ // Styles für die Knoten und Kanten | ||
| { | ||
| selector: 'node', | ||
| style: { | ||
| 'background-color': '#0074D9', | ||
| 'label': 'data(id)', | ||
| 'color': '#fff' | ||
| } | ||
| }, | ||
| { | ||
| selector: 'edge', | ||
| style: { | ||
| 'width': 3, | ||
| 'line-color': '#FF4136', | ||
| 'target-arrow-color': '#FF4136', | ||
| 'target-arrow-shape': 'triangle' | ||
| } | ||
| } | ||
| ], | ||
| layout: { | ||
| name: 'grid', | ||
| rows: 2 | ||
| } | ||
| }); | ||
| </script> | ||
|
|
||
| </body> | ||
| </html> |