From a588af0d3bad6d4145c49f7145f344bbe46443fe Mon Sep 17 00:00:00 2001
From: Katja <bax5612@studium.uni-hamburg.de>
Date: Fri, 3 Dec 2021 18:11:49 +0100
Subject: [PATCH] legend upper right
---
Output/cn_26_11_1.js | 39 ++++++++++++++++--------
Output/index.html | 72 ++++++++++++++++++++++++++++++--------------
2 files changed, 75 insertions(+), 36 deletions(-)
diff --git a/Output/cn_26_11_1.js b/Output/cn_26_11_1.js
index 99973d4..aa2ec65 100644
--- a/Output/cn_26_11_1.js
+++ b/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;
}
/**
diff --git a/Output/index.html b/Output/index.html
index a51548e..7b1f7ad 100644
--- a/Output/index.html
+++ b/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;
+ width: 100px;
+ height:20px;
+ display: flex;
+ justify-content: center;
+ position: absolute;
+ left: 430px;
+ top: 575px;
+ }
+
+ button.resetGraph {
color: black;
- cursor: pointer;
- position : absolute;
- top: 500px;
- right: 550px;
- } */
+ }
+ button.resetZoom {
+ margin-left: 110px;
+ }
- /* textbox */
- div {
+ 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>
--
GitLab