legend upper right

Output/cn_26_11_1.js

@@ -7,7 +7,10 @@ var zoom = d3.zoom().on("zoom", zoomHandler);
 * creates svg object and associated attributes
 * applies the zoom behavior to svg
 */
-var svg = d3.select("svg")
+
+var svg2=d3.select("svg.legendsvg")
+
+var svg = d3.select("svg.graph")
     .call(zoom),
 width = svg.attr("width"),
 height = svg.attr("height");
@@ -23,6 +26,9 @@ color = d3.scaleOrdinal()
 yscale = d3.scaleOrdinal()
     .domain(["citing", "input", "cited"])
     .range([0, 200, 400]),
+linetype=d3.scaleOrdinal()
+    .domain(["line","dotted"])
+    .range([("8,0"),("8,8")]),
 toRemove;
 
 /**
@@ -99,39 +105,45 @@ var rect2 = svg.append("rect")
     .attr("width", 210)
     .style("fill", 'white');
 
-legendposition=[70,110,150]
+legendposition=[65,95,125]
+arrowlegendposition=[0,25]
+arrowgroupnames=["citation","self-citation"]
 groupnames=["citing","input","cited"]
 
-var legend = svg.selectAll(".legend")
+var legend = svg2.selectAll(".legend")
     .data(legendposition)
     .enter()
     .append("g")
     .attr("class","legend")
-    .attr("transform", function(d) { return "translate(0," + d  + ")"; });
+    .attr("transform", function(d,i) {return "translate(0," + d  + ")"; });
 
 
 legend.append("text")
-    .attr("x", 100)
+    .attr("x", 80)
     .attr("y", 0)
     .attr("dy", ".35em")
     .style("text-anchor", "start")
-    .text(function(d){return groupnames[legendposition.indexOf(d)]});
+    .text(function(d,i){return groupnames[i]});
 
 legend.append("circle")
     .attr("r", r)
-    .attr("cx",50-r)
+    .attr("cx",30-r)
     .style("fill", color);
     
 
-var legendarrow = svg.append("g")
-.attr("class","legend")
-.attr("transform","translate(20,20)");
+var legendarrow = svg2.selectAll(".legendarr")
+    .data(arrowlegendposition)
+    .enter()
+    .append("g")
+    .attr("class","legendarr")
+    .attr("transform", function(d) { return "translate(0," + d  + ")"; });
+
 legendarrow.append("line")
     .attr("x1", 10)
     .attr("x2", 50)
     .attr("y1", 10)
     .attr("y2", 10)
-    .style("stroke-dasharray","8,8")
+    .style("stroke-dasharray",linetype)
     .style("stroke", '#999')
     .style("stroke-width", "1px")
     .style('pointer-events', 'none')
@@ -141,7 +153,7 @@ legendarrow.append("text")
     .attr("y", 10)
     .attr("dy", ".35em")
     .style("text-anchor", "start")
-    .text("self-citation");
+    .text(function(d,i){return arrowgroupnames[i]});
 
     
 /**
@@ -299,7 +311,8 @@ function firstauthor(authors){
 function textfunc(node){
     document.getElementById('textbox').innerHTML = "Title:" + '</br>' + node.name +
     '</br>' +'</br>'+"Author:"+ '</br>' +node.author+'</br>'+'</br>'+"Year:"+'</br>'
-    +node.year+'</br>'+'</br>'+"doi:"+'</br>'+node.doi;
+    +node.year+'</br>'+'</br>'+"doi:"+'</br>'+'<a href="'+node.doi+ '">'+node.doi
+    +'</a>'+'</br>'+'</br>'+"Citations:"+'</br>'+node.citations;
 }
 
 /**

Output/index.html

@@ -4,35 +4,60 @@
     <meta charset="utf-8">
 
     <style type="text/css">
-        /*
+        div.legendbox {
+            width:270px;
+            height:170px; 
+            padding: 10px;
+            /*border: 1px solid #999;*/
+            position: absolute; 
+            top: 10px; 
+            left: 968px;
+            display: inline-block;
+            margin: 0;
+        }
+
         button {
-            width: 150px;
-            font-size: 15px;
-            padding: 7px;
-            border-radius: 3px;
-            border: 3px solid #999;
-            color: black;
-            cursor: pointer;
+            width: 100px;
+            height:20px;
+            display: flex;
+            justify-content: center;
             position: absolute;
-            top: 500px;
-            right: 550px;
-        } */
+            left: 430px;
+            top: 575px;
+        }
 
+        button.resetGraph {
+            color: black;
+        }
 
-        /* textbox */
-        div {
+        button.resetZoom {
+            margin-left: 110px;
+        }
+
+        button.center {
+            margin-left: 220px;
+        }
+
+        button.save{
+            margin-left: 330px;
+        }
+
+        div.textbox{
             width:270px;
             min-height:200px; 
             max-height:370px;
             padding: 10px;
             border: 1px solid #999;
             position: absolute; 
-            top: 100px; 
-            left: 980px;
+            top: 200px; 
+            left: 968px;
             display: inline-block;
             overflow-y: scroll;
             margin: 0;
         }
+
+        / textbox */
+
     </style>
 </head>
 
@@ -41,18 +66,19 @@
     <p id="id"></p>  <!--for commenting with document.getElementById("id").innerHTML = "text"; -->
     
     <!-- graph -->
-    <svg width="960" height="500"  ></svg>
-
+    <svg class="graph" width="960" height="560"  ></svg>
+    <div class="legendbox"> <svg  class="legendsvg"></svg> </div>
     <!-- textbox -->
-    <div id = "textbox" style="border:1px solid" >Click node</div>
+    <div class="textbox" id = "textbox"  >Click node</div>
+   
 
 
     <!-- reset-buttons -->
-    <button onclick="javascript:location.reload();">Reload</button>
-    <button onclick="resetGraph()">Reset graph</button>
-    <button onclick="resetZoom()">Reset zoom</button>
-    <button onclick="center()">Center</button>
-    <button onclick="savesvg()">Save</button>
+  <!--   <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>
 
     <!-- link D3 (version 5) -->
     <script src="https://d3js.org/d3.v5.min.js"></script>