<!doctype html> <html> <head> <title>Network | HTML in nodex</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="390" 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> am' + '<span style="color:white; text-shadow:0 0 20px #000000;">' + ' HTML in SVG!</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 = { physics: {stabilization: false}, edges: {smooth: false} }; network = new vis.Network(container, data, options); } </script> <script src="../../googleAnalytics.js"></script> </head> <body onload="draw()"> <p> This example demonstrates showing custom HTML in Nodes, by using an SVG image. </p> <p style="color: red;"> WARNING: this is currently not supported by all browsers. </p> <div id="mynetwork"></div> </body> </html>