Textbox neben Graph

Output/index.html

@@ -30,7 +30,7 @@
         border: 1px solid #999;
         position: absolute; 
         top: 0; 
-        right: 0;
+        right: 440px;
         display: inline-block;
         overflow-y: scroll;
         margin: 0;
@@ -52,7 +52,7 @@
 <button onclick="resetGraph()">Reset graph</button>
 <button onclick="resetZoom()">Reset zoom</button>
 <button onclick="center()">Center</button>
-
+<div id = "textbox" style="border:1px solid">Click node</div>
 
 
 <script type="text/javascript">
@@ -258,9 +258,15 @@
                     .attr('height', 400)
                     .style("font-size", "15px")
                     .html(function(h) {
+                
+                document.getElementById('textbox').innerHTML = "Title:" + '</br>' + d.name +
+                '</br>' +'</br>'+"Author:"+ '</br>' +d.author+'</br>'+'</br>'+"Year:"+'</br>'+d.year+'</br>'+'</br>'
+                +"doi:"+'</br>'+d.doi;
+                /*
                 return '<div style="border:1px solid">' + "Title:" + '</br>' + d.name +
                 '</br>' +'</br>'+"Author:"+ '</br>' +d.author+'</br>'+'</br>'+"Year:"+'</br>'+d.year+'</br>'+'</br>'
                 +"doi:"+'</br>'+d.doi+'</div>'
+                */
                 })
         
     }
@@ -293,21 +299,6 @@
 function zoom_actions(){
     d3.select('g').attr("transform", d3.event.transform)
 }
-/* unn"otig?
-function tickActions() {
-    //update circle positions each tick of the simulation 
-       node
-        .attr("cx", function(d) { return d.x; })
-        .attr("cy", function(d) { return d.y; });
-        
-    //update link positions 
-    link
-        .attr("x1", function(d) { return d.source.x; })
-        .attr("y1", function(d) { return d.source.y; })
-        .attr("x2", function(d) { return d.target.x; })
-        .attr("y2", function(d) { return d.target.y; });
-} 
-*/
 
 function resetZoom() {
 	d3.select('svg')