diff --git a/Output/ToDo.txt b/Output/ToDo.txt index 9dad2d61fce982c8159389f622fb855ba6ef76d7..44bc374c91614f827bd74b36c411db8959e1b810 100644 --- a/Output/ToDo.txt +++ b/Output/ToDo.txt @@ -1,9 +1,19 @@ -TO-DO: -- Hovertext in Textbox beim Anklicken (?) -- Schnittstelle (Json) -- 3 Schichten im Graph (?) -- Gruppen mit Farben -- allgemeines Design -- Knoten ziehen -- Rein- und Rauszoomen (?) -- Knopf zum Zurücksetzen +Erledigt: +- Graphstruktur mit Knoten und Kanten (+ Schnittstelle mit Verarbeitung (Json)) +- 3 senkrechte Schichten für Input, Citing und Cited (+ Farben) +- Scroll- und Schiebefunktionen des gesamten Graphen +- Zoom- und Schiebefunktionen des gesamten Graphen +- Schiebefunktionen der einzelnen Knoten +- Hover-Text mit den zugehörigen Informationen von den Knoten +- Informationsfenster auf Klick geöffnet +- Hervorhebung von Knoten und deren verbundenen Kanten auf Klick +- Knopf zum Zurücksetzen der Graphstruktur +- Knopf zum Zurücksetzen der Zoom-Funktion +- Knopf zum Zurücksetzen der Schiebe-Funktion + +Noch offen: +- Strukturierung und Kommentierung des Codes verbessern +- Informationsfenster an sehr lange Titel anpassen +- Überlagerung von Graph und Informationsfenster verhindern +- Zurücksetzen der Markierungsfunktion +- Speicherfunktion (?) diff --git a/Output/index.html b/Output/index.html index 2bfd0297267d1425e374a42f9d0e7b7c85b78847..2947b158785d6a87bf0edf208d6afdd39c84886e 100644 --- a/Output/index.html +++ b/Output/index.html @@ -8,6 +8,20 @@ .node {} .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; } + + /* + button { + width: 150px; + font-size: 15px; + padding: 7px; + border-radius: 3px; + border: 3px solid #999; + color: black; + cursor: pointer; + position : absolute; + top: 500px; + right: 550px; + } */ </style> <link rel="shortcut icon" href="#"> </head> @@ -18,6 +32,12 @@ <script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script> <script src="https://d3js.org/d3-selection-multi.v1.js"></script> +<!-- Rücksetzbuttons --> +<button onclick="javascript:location.reload();">Reload</button> +<button onclick="resetGraph()">Reset graph</button> +<button onclick="resetZoom()">Reset zoom</button> +<button onclick="center()">Center</button> + <script type="text/javascript"> // var colors = d3.scaleOrdinal(d3.schemeCategory10); @@ -40,7 +60,6 @@ height = +svg.attr("height"), node, link, - // groups; //not used? r=12; svg.append('defs').append('marker')//arrowhead @@ -72,7 +91,6 @@ .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)) @@ -82,15 +100,18 @@ // .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) } )); - - var g = svg.append("g") - .attr("class", "everything"); - // Hinzufügen der Zoom-Fähigkeiten - var zoom_handler = d3.zoom() + var zoom = d3.zoom() + //.scaleExtent([0.25, 10]) .on("zoom", zoom_actions); - zoom_handler(svg); + //d3.select('svg').call(zoom); + zoom(svg); + + var g = svg.append("g") + .attr("class", "everything") + //.call(zoom); + d3.json("data.json", function (error, graph) { if (error) throw error; @@ -121,7 +142,9 @@ .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;}); @@ -268,9 +291,9 @@ function zoom_actions(){ - g.attr("transform", d3.event.transform) + d3.select('g').attr("transform", d3.event.transform) } - +/* unn"otig? function tickActions() { //update circle positions each tick of the simulation node @@ -284,9 +307,26 @@ function tickActions() { .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); } +*/ +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>