<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> button { width: 100px; height:20px; display: flex; justify-content: center; position: absolute; left: 430px; top: 575px; } button.resetGraph {} button.resetZoom { margin-left: 110px; } button.center { margin-left: 220px; } button.save{ margin-left: 330px; } button.abstract{ width:146px; position:absolute; top: 181px; left: 1114px; border-radius:0; border:1px solid #909090; } button.overview{ width:147px; position:absolute; display:inline-block; top: 181px; left: 968px; border-radius:0; border:1px solid #909090; } div.legendbox { width:270px; height:170px; padding: 10px; /*border: 1px solid #999;*/ position: absolute; top: 10px; left: 968px; display: inline-block; margin: 0; } div.textbox{ width:270px; min-height:200px; max-height:370px; padding: 10px; border: 1px solid #999; position: absolute; top: 200px; left: 968px; display: inline-block; overflow-y: scroll; margin: 0; } </style> </head> <body> <!-- for testing --> <p id="id"></p> <!--for commenting with document.getElementById("id").innerHTML = "text"; --> <!-- graph --> <svg class="graph" width="960" height="560"></svg> <!-- legend --> <div class="legendbox"> <svg class="legendsvg"></svg></div> <!-- textbox --> <div class="textbox" id = "textbox">Click node</div> <!-- reset buttons --> <!-- <button onclick="javascript:location.reload();">Reload</button>--> <button class="resetGraph" onclick="resetGraph()">Reset graph</button> <button class="resetZoom" onclick="resetZoom()">Reset zoom</button> <button class="center" onclick="center()">Center</button> <button class="save" onclick="savesvg()">Save</button> <button id="overview" class="overview" onclick='displayabstract(false),highlightbutton("overview")'>Overview</button> <button id="abstract" class="abstract" onclick='displayabstract(true),highlightbutton("abstract")'>Abstract</button> <!-- link D3 (version 5) --> <script src="https://d3js.org/d3.v5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.13.0/d3-legend.js"></script> <script src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"></script> <script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script> <script type="text/javascript" src="cn_Zeitstrahl.js"></script> </body> </html>