Alex de Mulder
10 years ago
2 changed files with 81 additions and 0 deletions
Split View
Diff Options
+ 80
- 0
examples/network/36_HTML_in_Nodes.html
View File
| @ -0,0 +1,80 @@ | |||
| <!doctype html> | |||
| <html> | |||
| <head> | |||
| <title>Network | Images</title> | |||
| <style type="text/css"> | |||
| body { | |||
| font: 10pt arial; | |||
| } | |||
| #mynetwork { | |||
| width: 600px; | |||
| height: 600px; | |||
| border: 1px solid lightgray; | |||
| background-color:#eeeeee; | |||
| } | |||
| </style> | |||
| <script type="text/javascript" src="../../dist/vis.js"></script> | |||
| <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
| <script type="text/javascript"> | |||
| var nodes = null; | |||
| var edges = null; | |||
| var network = null; | |||
| var DIR = 'img/refresh-cl/'; | |||
| var LENGTH_MAIN = 150; | |||
| var LENGTH_SUB = 50; | |||
| var data = '<svg xmlns="http://www.w3.org/2000/svg" width="243" height="65">' + | |||
| '<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#ffffff" ></rect>' + | |||
| '<foreignObject x="15" y="10" width="100%" height="100%">' + | |||
| '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' + | |||
| '<em>I</em> like' + | |||
| '<span style="color:white; text-shadow:0 0 20px #000000;">' + | |||
| 'cheese</span>' + | |||
| '</div>' + | |||
| '</foreignObject>' + | |||
| '</svg>'; | |||
| var DOMURL = window.URL || window.webkitURL || window; | |||
| var img = new Image(); | |||
| var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'}); | |||
| var url = DOMURL.createObjectURL(svg); | |||
| // Called when the Visualization API is loaded. | |||
| function draw() { | |||
| // Create a data table with nodes. | |||
| nodes = []; | |||
| // Create a data table with links. | |||
| edges = []; | |||
| nodes.push({id: 1, label: 'Get HTML', image: url, shape: 'image'}); | |||
| nodes.push({id: 2, label: 'Using SVG', image: url, shape: 'image'}); | |||
| edges.push({from: 1, to: 2, length: 300}); | |||
| // create a network | |||
| var container = document.getElementById('mynetwork'); | |||
| var data = { | |||
| nodes: nodes, | |||
| edges: edges | |||
| }; | |||
| var options = { | |||
| stabilize: false, | |||
| smoothCurves:false | |||
| }; | |||
| network = new vis.Network(container, data, options); | |||
| } | |||
| </script> | |||
| </head> | |||
| <body onload="draw()"> | |||
| <div id="mynetwork"></div> | |||
| </body> | |||
| </html> | |||