Skip to content
Snippets Groups Projects
Commit da4aa6bf authored by Merle's avatar Merle
Browse files

aufgeräumt

parent 8d3751de
No related branches found
No related tags found
2 merge requests!10Output,!9Main
Expand all Show whitespace changes
Inline Side-by-side
Output/ToDo.txt
+ 4
− 0
View file @ da4aa6bf
......@@ -17,4 +17,8 @@ Noch offen:
- Informationsfenster an sehr lange Titel anpassen
- Überlagerung von Graph und Informationsfenster verhindern
- Zurücksetzen der Markierungsfunktion
- Skalierung an unterschiedliche Geräte anpassen
- Schnittstelle zu Benutzeroberfläche (!)
- Informationen zu Funktionen anzeigen (?)
- Speicherfunktion (?)
- Suchfunktion
Output/bob/files.html 0 → 100644
+ 216
− 0
View file @ da4aa6bf
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JsDoc Reference - File Index</title>
<meta name="generator" content="JsDoc Toolkit" />
<style type="text/css">
/* default.css */
body
{
font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
width: 800px;
}
.header
{
clear: both;
background-color: #ccc;
padding: 8px;
}
h1
{
font-size: 150%;
font-weight: bold;
padding: 0;
margin: 1em 0 0 .3em;
}
hr
{
border: none 0;
border-top: 1px solid #7F8FB1;
height: 1px;
}
pre.code
{
display: block;
padding: 8px;
border: 1px dashed #ccc;
}
#index
{
margin-top: 24px;
float: left;
width: 160px;
position: absolute;
left: 8px;
background-color: #F3F3F3;
padding: 8px;
}
#content
{
margin-left: 190px;
width: 600px;
}
.classList
{
list-style-type: none;
padding: 0;
margin: 0 0 0 8px;
font-family: arial, sans-serif;
font-size: 1em;
overflow: auto;
}
.classList li
{
padding: 0;
margin: 0 0 8px 0;
}
.summaryTable { width: 100%; }
h1.classTitle
{
font-size:170%;
line-height:130%;
}
h2 { font-size: 110%; }
caption, div.sectionTitle
{
background-color: #7F8FB1;
color: #fff;
font-size:130%;
text-align: left;
padding: 2px 6px 2px 6px;
border: 1px #7F8FB1 solid;
}
div.sectionTitle { margin-bottom: 8px; }
.summaryTable thead { display: none; }
.summaryTable td
{
vertical-align: top;
padding: 4px;
border-bottom: 1px #7F8FB1 solid;
border-right: 1px #7F8FB1 solid;
}
/*col#summaryAttributes {}*/
.summaryTable td.attributes
{
border-left: 1px #7F8FB1 solid;
width: 140px;
text-align: right;
}
td.attributes, .fixedFont
{
line-height: 15px;
color: #002EBE;
font-family: "Courier New",Courier,monospace;
font-size: 13px;
}
.summaryTable td.nameDescription
{
text-align: left;
font-size: 13px;
line-height: 15px;
}
.summaryTable td.nameDescription, .description
{
line-height: 15px;
padding: 4px;
padding-left: 4px;
}
.summaryTable { margin-bottom: 8px; }
ul.inheritsList
{
list-style: square;
margin-left: 20px;
padding-left: 0;
}
.detailList {
margin-left: 20px;
line-height: 15px;
}
.detailList dt { margin-left: 20px; }
.detailList .heading
{
font-weight: bold;
padding-bottom: 6px;
margin-left: 0;
}
.light, td.attributes, .light a:link, .light a:visited
{
color: #777;
font-style: italic;
}
.fineprint
{
text-align: right;
font-size: 10px;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="index">
<div align="center"><a href="index.html">Class Index</a>
| <a href="files.html">File Index</a></div>
<hr />
<h2>Classes</h2>
<ul class="classList">
<li><i><a href="symbols/_global_.html">_global_</a></i></li>
</ul>
<hr />
</div>
<div id="content">
<h1 class="classTitle">File Index</h1>
<div>
<h2><a href="symbols/src/cn.js.html">cn.js</a></h2>
<dl>
</dl>
</div>
<hr />
</div>
<div class="fineprint" style="clear:both">
Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Fri Nov 19 2021 19:23:13 GMT+0100 (MEZ)
</div>
</body>
</html>
\ No newline at end of file
Output/bob/index.html 0 → 100644
+ 210
− 0
View file @ da4aa6bf
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JsDoc Reference - Index</title>
<meta name="generator" content="JsDoc Toolkit" />
<style type="text/css">
/* default.css */
body
{
font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
width: 800px;
}
.header
{
clear: both;
background-color: #ccc;
padding: 8px;
}
h1
{
font-size: 150%;
font-weight: bold;
padding: 0;
margin: 1em 0 0 .3em;
}
hr
{
border: none 0;
border-top: 1px solid #7F8FB1;
height: 1px;
}
pre.code
{
display: block;
padding: 8px;
border: 1px dashed #ccc;
}
#index
{
margin-top: 24px;
float: left;
width: 160px;
position: absolute;
left: 8px;
background-color: #F3F3F3;
padding: 8px;
}
#content
{
margin-left: 190px;
width: 600px;
}
.classList
{
list-style-type: none;
padding: 0;
margin: 0 0 0 8px;
font-family: arial, sans-serif;
font-size: 1em;
overflow: auto;
}
.classList li
{
padding: 0;
margin: 0 0 8px 0;
}
.summaryTable { width: 100%; }
h1.classTitle
{
font-size:170%;
line-height:130%;
}
h2 { font-size: 110%; }
caption, div.sectionTitle
{
background-color: #7F8FB1;
color: #fff;
font-size:130%;
text-align: left;
padding: 2px 6px 2px 6px;
border: 1px #7F8FB1 solid;
}
div.sectionTitle { margin-bottom: 8px; }
.summaryTable thead { display: none; }
.summaryTable td
{
vertical-align: top;
padding: 4px;
border-bottom: 1px #7F8FB1 solid;
border-right: 1px #7F8FB1 solid;
}
/*col#summaryAttributes {}*/
.summaryTable td.attributes
{
border-left: 1px #7F8FB1 solid;
width: 140px;
text-align: right;
}
td.attributes, .fixedFont
{
line-height: 15px;
color: #002EBE;
font-family: "Courier New",Courier,monospace;
font-size: 13px;
}
.summaryTable td.nameDescription
{
text-align: left;
font-size: 13px;
line-height: 15px;
}
.summaryTable td.nameDescription, .description
{
line-height: 15px;
padding: 4px;
padding-left: 4px;
}
.summaryTable { margin-bottom: 8px; }
ul.inheritsList
{
list-style: square;
margin-left: 20px;
padding-left: 0;
}
.detailList {
margin-left: 20px;
line-height: 15px;
}
.detailList dt { margin-left: 20px; }
.detailList .heading
{
font-weight: bold;
padding-bottom: 6px;
margin-left: 0;
}
.light, td.attributes, .light a:link, .light a:visited
{
color: #777;
font-style: italic;
}
.fineprint
{
text-align: right;
font-size: 10px;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="index">
<div align="center"><a href="index.html">Class Index</a>
| <a href="files.html">File Index</a></div>
<hr />
<h2>Classes</h2>
<ul class="classList">
<li><i><a href="symbols/_global_.html">_global_</a></i></li>
</ul>
<hr />
</div>
<div id="content">
<h1 class="classTitle">Class Index</h1>
<div>
<h2><a href="symbols/_global_.html">_global_</a></h2>
</div>
<hr />
</div>
<div class="fineprint" style="clear:both">
Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Fri Nov 19 2021 19:23:13 GMT+0100 (MEZ)
</div>
</body>
</html>
\ No newline at end of file
Output/bob/symbols/_global_.html 0 → 100644
+ 320
− 0
View file @ da4aa6bf
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="JsDoc Toolkit" />
<title>JsDoc Reference - _global_</title>
<style type="text/css">
/* default.css */
body
{
font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
width: 800px;
}
.header
{
clear: both;
background-color: #ccc;
padding: 8px;
}
h1
{
font-size: 150%;
font-weight: bold;
padding: 0;
margin: 1em 0 0 .3em;
}
hr
{
border: none 0;
border-top: 1px solid #7F8FB1;
height: 1px;
}
pre.code
{
display: block;
padding: 8px;
border: 1px dashed #ccc;
}
#index
{
margin-top: 24px;
float: left;
width: 160px;
position: absolute;
left: 8px;
background-color: #F3F3F3;
padding: 8px;
}
#content
{
margin-left: 190px;
width: 600px;
}
.classList
{
list-style-type: none;
padding: 0;
margin: 0 0 0 8px;
font-family: arial, sans-serif;
font-size: 1em;
overflow: auto;
}
.classList li
{
padding: 0;
margin: 0 0 8px 0;
}
.summaryTable { width: 100%; }
h1.classTitle
{
font-size:170%;
line-height:130%;
}
h2 { font-size: 110%; }
caption, div.sectionTitle
{
background-color: #7F8FB1;
color: #fff;
font-size:130%;
text-align: left;
padding: 2px 6px 2px 6px;
border: 1px #7F8FB1 solid;
}
div.sectionTitle { margin-bottom: 8px; }
.summaryTable thead { display: none; }
.summaryTable td
{
vertical-align: top;
padding: 4px;
border-bottom: 1px #7F8FB1 solid;
border-right: 1px #7F8FB1 solid;
}
/*col#summaryAttributes {}*/
.summaryTable td.attributes
{
border-left: 1px #7F8FB1 solid;
width: 140px;
text-align: right;
}
td.attributes, .fixedFont
{
line-height: 15px;
color: #002EBE;
font-family: "Courier New",Courier,monospace;
font-size: 13px;
}
.summaryTable td.nameDescription
{
text-align: left;
font-size: 13px;
line-height: 15px;
}
.summaryTable td.nameDescription, .description
{
line-height: 15px;
padding: 4px;
padding-left: 4px;
}
.summaryTable { margin-bottom: 8px; }
ul.inheritsList
{
list-style: square;
margin-left: 20px;
padding-left: 0;
}
.detailList {
margin-left: 20px;
line-height: 15px;
}
.detailList dt { margin-left: 20px; }
.detailList .heading
{
font-weight: bold;
padding-bottom: 6px;
margin-left: 0;
}
.light, td.attributes, .light a:link, .light a:visited
{
color: #777;
font-style: italic;
}
.fineprint
{
text-align: right;
font-size: 10px;
}
</style>
</head>
<body>
<!-- ============================== header ================================= -->
<!-- begin static/header.html -->
<div id="header">
</div>
<!-- end static/header.html -->
<!-- ============================== classes index ============================ -->
<div id="index">
<!-- begin publish.classesIndex -->
<div align="center"><a href="../index.html">Class Index</a>
| <a href="../files.html">File Index</a></div>
<hr />
<h2>Classes</h2>
<ul class="classList">
<li><i><a href="../symbols/_global_.html">_global_</a></i></li>
</ul>
<hr />
<!-- end publish.classesIndex -->
</div>
<div id="content">
<!-- ============================== class title ============================ -->
<h1 class="classTitle">
Built-In Namespace _global_
</h1>
<!-- ============================== class summary ========================== -->
<p class="description">
</p>
<!-- ============================== constructor summary ==================== -->
<!-- ============================== properties summary ===================== -->
<!-- ============================== methods summary ======================== -->
<table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class _global_.">
<caption>Method Summary</caption>
<thead>
<tr>
<th scope="col">Method Attributes</th>
<th scope="col">Method Name and Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/_global_.html#firstauthor">firstauthor</a></b>(authors)
</div>
<div class="description">returns last name of first author</div>
</td>
</tr>
</tbody>
</table>
<!-- ============================== events summary ======================== -->
<!-- ============================== constructor details ==================== -->
<!-- ============================== field details ========================== -->
<!-- ============================== method details ========================= -->
<div class="sectionTitle">
Method Detail
</div>
<a name="firstauthor"> </a>
<div class="fixedFont">
<b>firstauthor</b>(authors)
</div>
<div class="description">
returns last name of first author
<br />
<i>Defined in: </i> <a href="../symbols/src/cn.js.html">cn.js</a>.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{string}</span> <b>authors</b>
</dt>
<dd>- The comma-separated string of authors</dd>
</dl>
<!-- ============================== event details ========================= -->
<hr />
</div>
<!-- ============================== footer ================================= -->
<div class="fineprint" style="clear:both">
Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Fri Nov 19 2021 19:23:13 GMT+0100 (MEZ)
</div>
</body>
</html>
Output/bob/symbols/src/cn.js.html 0 → 100644
+ 209
− 0
View file @ da4aa6bf
This diff is collapsed.
Output/cn.js 0 → 100644
+ 202
− 0
View file @ da4aa6bf
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var node,
r=12,
color = d3.scaleOrdinal()
.domain(["citing", "input", "cited"])
.range([' #01d7c0', ' #8b90fe ', ' #a15eb2 ']),
yscale = d3.scaleOrdinal()
.domain(["citing", "input", "cited"])
.range([0, 200, 400]),
toRemove;
var link;
var rect = svg.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("height", height)
.attr("width", width)
.style("fill", 'white')
.on('click', function(d) {
d3.selectAll(".circle").style("stroke", "none")
d3.selectAll(".link")
.style("stroke", "#999")
.attr('marker-end',marker('#999'))
document.getElementById('textbox').innerHTML = "Click node";
});
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {return d.doi;}).distance(100).strength(1))
.force("collide", d3.forceCollide(50))
.force("charge", d3.forceManyBody().strength(-30))
.force("center", d3.forceCenter(width/2, height/2))
.force("yscale", d3.forceY().strength(1).y(function(d) {return yscale(d.group)}));
var zoom = d3.zoom()
.on("zoom", zoom);
zoom(svg);
var g = svg.append("g")
.attr("class", "everything")
//d3.json("data.json", function (error, graph) {
d3.json("json_text.json").then(function(graph){
update(graph.links, graph.nodes);
})
function update(links, nodes) {
link = g.append("g")
.selectAll(".link")
.data(links)
.enter()
.append("line")
.style("stroke-width", "1px")
.style("stroke", "#999")
.attr("class", "link")
.attr('marker-end',marker("#999"))
node = g.append("g")
.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
)
.attr("initial_x", function(d) {return d.dx;})
.attr("initial_y", function(d) {return d.dy;});
node.append("circle")
.attr("r", r)
.attr("class", "circle")
.style("fill", function(d){ return color(d.group)})
.on('click', function (d) {
if(toRemove){
d3.select(toRemove).selectAll(".circle").style("stroke","none")
}
toRemove = this.parentNode;
d3.select(this).style("stroke","black")
marklink(d)
textfunc(d)
});
node.append("text")
.attr("class", "text") //über selectAll(".text") können objs mit der klasse ausgewählt werden
.style("font-size", "15px")
.text(function (d) {return firstauthor(d.author);})
.style('pointer-events', 'auto')
.on('click', function(d) {
if(toRemove){
d3.select(toRemove).selectAll(".circle").style("stroke","none");
}
toRemove = this.parentNode;
d3.select(this.parentNode).selectAll(".circle").style("stroke","black")
marklink(d)
textfunc(d);
});
simulation
.nodes(nodes)
.on("tick", ticked);
simulation.force("link")
.links(links);
}
function isLinkForNode(node, link){
return link.source.index == node.index || link.target.index == node.index;
}
function marklink(node){
d3.selectAll(".link")
.style("stroke", function(o) {
return isLinkForNode(node, o) ? "black" : "#999";})
.attr('marker-end', function(o) {
return isLinkForNode(node, o) ? marker('#000000') : marker('#999');})
}
function marker(color) {
svg.append('defs').append('marker')//arrowhead
.attr('id',color.replace("#", ""))
.attr('viewBox','-0 -5 10 10')
.attr('refX',r+10)
.attr('refY',0)
.attr('orient','auto')
.attr('markerWidth',10)
.attr('markerHeight',15)
.attr('xoverflow','visible')
.append('svg:path')
.attr('d', 'M 0,-5 L 10 ,0 L 0,5')
.attr('fill', color)//arrowhead color
.style('stroke','none');
return "url(" + color + ")";
};
/**
* returns last name of first author
* @param {string} authors - The comma-separated string of authors
*/
function firstauthor(authors){
if (/,/.test(authors)==false){
var firstauthor=/^.*\s+([\w\-]+)[\.\s]*$/.exec(authors)
}
else{
var firstauthor=/^[\s\w\.\-]*\s([\w\-]+)[\.\s]*,.*$/.exec(authors)
}
return firstauthor[1]
}
function textfunc(d){
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;
}
function ticked() {
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;});
node.attr("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";});
}
function dragstarted(d) {
if (!d3.event.active)
simulation.alphaTarget(0.3).restart()
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function resetGraph(){
d3.selectAll(".node").each(function(d) {
d.fx = d.initial_x;
d.fy = d.initial_y;
})
}
function zoom(){
d3.select('g').attr("transform", d3.event.transform)
}
function resetZoom() {
d3.select('svg')
.transition()
.call(zoom.scaleTo, 1);
}
function center() {
d3.select('svg')
.transition()
.call(zoom.translateTo, 0.5 * width, 0.5 * height);
}
\ No newline at end of file
Output/index.html
+ 39
− 305
View file @ da4aa6bf
......@@ -2,13 +2,8 @@
<html lang="en">
<head>
<meta charset="utf-8">
<!--- <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.node {}
.link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
<style type="text/css">
/*
button {
width: 150px;
......@@ -22,6 +17,8 @@
top: 500px;
right: 550px;
} */
/* textbox */
div {
width:270px;
min-height:200px;
......@@ -29,297 +26,34 @@
padding: 10px;
border: 1px solid #999;
position: absolute;
top: 0;
top: 20px;
right: 440px;
display: inline-block;
overflow-y: scroll;
margin: 0;
}
</style>
<!--width: 270px;-->
<link rel="shortcut icon" href="#">
</head>
<body>
<!-- for testing -->
<p id="id"></p> <!--for commenting with document.getElementById("id").innerHTML = "text"; -->
<!-- graph -->
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
<script src="https://d3js.org/d3-selection-multi.v1.js"></script>
<!-- textbox -->
<div id = "textbox" style="border:1px solid">Click node</div>
<!-- Rücksetzbuttons -->
<!-- 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>
<div id = "textbox" style="border:1px solid">Click node</div>
<script type="text/javascript">
// var colors = d3.scaleOrdinal(d3.schemeCategory10);
// Farbgruppen
var color = d3.scaleOrdinal()
.domain(["citing", "input", "cited"])
//.range([ "#F8766D", "#00BA38", "#619CFF"])
.range([' #01d7c0', ' #8b90fe ', ' #01cd2f '])
/* var x = d3.scaleOrdinal()
.domain(["citing", "input", "cited"])
.range([10, 200, 340])*/
var yscale = d3.scaleOrdinal()
.domain(["citing", "input", "cited"])
.range([0, 200, 400])
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
node,
link,
r=12;
svg.append('defs').append('marker')//arrowhead
.attrs({'id':'arrowhead',
'viewBox':'-0 -5 10 10',
'refX':r+10,
'refY':0,
'orient':'auto',
'markerWidth':10,
'markerHeight':15,
'xoverflow':'visible'})
.append('svg:path')
.attr('d', 'M 0,-5 L 10 ,0 L 0,5')
.attr('fill', '#999')//arrowhead color
.style('stroke','none');
svg.append('defs').append('marker')//arrowhead
.attrs({'id':'arrowhead2',
'viewBox':'-0 -5 10 10',
'refX':r+10,
'refY':0,
'orient':'auto',
'markerWidth':10,
'markerHeight':15,
'xoverflow':'visible'})
.append('svg:path')
.attr('d', 'M 0,-5 L 10 ,0 L 0,5')
.attr('fill', 'black')//arrowhead color
.style('stroke','none');
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function (d) { return d.doi; }).distance(100).strength(1))
.force("collide", d3.forceCollide(50))
.force("charge", d3.forceManyBody().strength(-30))
.force("center", d3.forceCenter(width / 2, height / 2))
// .force("x", d3.forceX().strength(0.5).x( function(d){ return x(d.group) } ));
.force("yscale", d3.forceY().strength(1).y( function(d){ return yscale(d.group) } ));
// Hinzufügen der Zoom-Fähigkeiten
var zoom = d3.zoom()
//.scaleExtent([0.25, 10])
.on("zoom", zoom_actions);
//d3.select('svg').call(zoom);
zoom(svg);
var g = svg.append("g")
.attr("class", "everything")
//.call(zoom);
//d3.json("data.json", function (error, graph) {
d3.json("json_text.json", function (error, graph) {
if (error) throw error;
update(graph.links, graph.nodes);
})
function update(links, nodes) {
link = g.append("g")
.selectAll(".link")
.data(links)
.enter()
.append("line")
.style("stroke-width", "1px")
.style("stroke", "#000000")
.attr("class", "link")
.attr('marker-end','url(#arrowhead)')
link.append("title")
.text(function (d) {return d.author;});
node = g.append("g") // Zoom
.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
)
.attr("initial_x", function(d) {return d.dx;})
.attr("initial_y", function(d) {return d.dy;});
var h = svg.append('g').attr("transform" ,"scale(0)");
h.transition().duration(500).attr("transform" ,"scale(1)");
var toRemove;
node.append("circle")
.attr("r", r)
.attr("class", "circle")
.style("fill", function(d){ return color(d.group)})
.on('click', function(d) {
if(toRemove){
d3.select(toRemove).selectAll(".circle").style("stroke","none")
}
toRemove = this.parentNode;
d3.select(this).style("stroke","black")
d3.selectAll(".link").style("stroke", function(o) {
return isLinkForNode(d, o) ? "black" : "#000000";})
d3.selectAll(".link").style("stroke-opacity", function(o) {
return isLinkForNode(d, o) ? "1" : ".6";})
d3.selectAll(".link").attr('marker-end', function(o) {
return isLinkForNode(d, o) ? 'url(#arrowhead2)' : 'url(#arrowhead)';})
textfunc(d,h)
})
//hovertext
/* node.append("title")
.text(function (d) {return "Title: "+d.name+"\nAuthor: "+d.author+"\nYear: "+d.year+"\ndoi: "+d.doi;});
*/
node.append("text")
.attr("class", "text") //über selectAll(".text") können objs mit der klasse ausgewählt werden
.style("font-size", "15px")
.text(function (d) {return author(d.author);})
.style('pointer-events', 'auto')
.on('click', function(d) {
if(toRemove){
d3.select(toRemove).selectAll(".circle").style("stroke","none");
}
toRemove = this.parentNode;
d3.select(this.parentNode).selectAll(".circle").style("stroke","black")
d3.selectAll(".link").style("stroke", function(o) {
return isLinkForNode(d, o) ? "black" : "#000000";})
d3.selectAll(".link").style("stroke-opacity", function(o) {
return isLinkForNode(d, o) ? "1" : ".6";})
d3.selectAll(".link").attr('marker-end', function(o) {
return isLinkForNode(d, o) ? 'url(#arrowhead2)' : 'url(#arrowhead)';})
textfunc(d,h);
});
simulation
.nodes(nodes)
.on("tick", ticked);
simulation.force("link")
.links(links);
}
function isLinkForNode(node, link){
return link.source.index == node.index || link.target.index == node.index;
}
function author(author){
if (/,/.test(author)==false){
var hmm=/^.*\s+([\w\-]+)[\.\s]*$/.exec(author)
}
else{
var hmm=/^[\s\w\.\-]*\s([\w\-]+)[\.\s]*,.*$/.exec(author)
}
return hmm[1]
}
function textfunc(d,h){
d3.selectAll("foreignObject").remove()
h.append('foreignObject')
.attr('x', width-300)
.attr('y', 15)
.attr('width', 300)
.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>'
*/
})
}
function ticked() {
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;});
node
.attr("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";});
}
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart()//specify forces?
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function zoom_actions(){
d3.select('g').attr("transform", d3.event.transform)
}
function resetZoom() {
d3.select('svg')
.transition()
.call(zoom.scaleTo, 1);
}
function center() {
d3.select('svg')
.transition()
.call(zoom.translateTo, 0.5 * width, 0.5 * height);
}
function resetGraph(){
d3.selectAll(".node").each(function(d) {
d.fx = d.initial_x;
d.fy = d.initial_y;
})
}
</script>
<!-- link D3 (version 5) -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript" src="cn.js"></script>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment