Upgraded d3js dependency from 3.4.4 to 5.7.0

htroot/Crawler_p.html

@@ -290,7 +290,7 @@ window.setInterval("setTableSize()", 1000);
 <td>
   <form style="float:right;" action="Crawler_p.html"><input type="submit" name="hidewebstructuregraph" class="btn btn-default btn-xs" value="hide graphic"/><form>
 </td></tr></table>
-<script src="js/d3.v3.min.js"></script>
+<script src="js/d3.v5.min.js"></script>
 <script src="js/hypertree.js"></script>
 <div id="linkstructure"></div>
 <script>$(document).ready(linkstructure("#[hosts]#", "#linkstructure", 1280, 720, 3000, 700));</script>::

htroot/HostBrowser.html

@@ -232,7 +232,7 @@ var solr= $.getJSON("solr/collection1/select?q=*:*&defType=edismax&start=0&rows=
     </fieldset>
     
     #(linkgraph)#<div style="text-align:center"><form><input name="showlinkstructure" onClick="location.href = location.toString() + '&showlinkstructure=';" class="btn btn-default btn-xs" value="show link structure graph"/></form></div>::
-    <script src="js/d3.v3.min.js"></script>
+    <script src="js/d3.v5.min.js"></script>
     <script src="js/hypertree.js"></script>
     <div id="linkstructure"></div>
     <script>$(document).ready(linkstructure("#[host]#", "#linkstructure", 1280, 720, 3000, 700));</script>

htroot/js/hypertree.js

@@ -20,15 +20,26 @@
 function linkstructure(hostname, element, width, height, maxtime, maxnodes) {
 	var nodes = {};
 	var links = [];
-	var linkstructure = {};
 	$.getJSON("api/linkstructure.json?about=" + hostname + "&maxtime=" + maxtime + "&maxnodes=" + maxnodes, function(linkstructure) {
 		links = linkstructure.graph;
 		links.forEach(function(link) {
 			  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, type:"Inbound"});
 			  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, type:link.type});
 		});
-		var force = d3.layout.force().nodes(d3.values(nodes)).links(links).size([width, height]).linkDistance(60).charge(-800).on("tick", tick).start();
+		
-		force.gravity(0.7);
+		/* attract nodes to the center - was set with force.gravity(0.7) in d3v3 */
+		var forceX = d3.forceX(width / 2).strength(0.7);
+		var forceY = d3.forceY(height / 2).strength(0.7);
+		
+		var link = d3.forceLink(links).distance(60).strength(1);
+		var simulation = d3.forceSimulation()
+			.nodes(d3.values(nodes))
+			.force('link', link)
+			.force("center", d3.forceCenter(width / 2, height / 2)) // center elements - was set with size([width, height]) in d3v3
+			.force('charge', d3.forceManyBody().strength(-800))
+			.force('x', forceX)
+			.force('y',  forceY)
+			.on("tick", ticked);
 		var svg = d3.select(element).append("svg").attr("id", "hypertree").attr("width", width).attr("height", height);
 		svg.append("defs").selectAll("marker")
 		    .data(["Dead", "Outbound", "Inbound"])
@@ -49,15 +60,15 @@ function linkstructure(hostname, element, width, height, maxtime, maxnodes) {
 		svg.append("text").attr("x", 10).attr("y", height - 10).text("blue: links to other domains").attr("style", "font-size:9px").attr("fill", "lightblue");
 		svg.append("text").attr("x", 10).attr("y", height).text("red: dead links").attr("style", "font-size:9px").attr("fill", "red");
 		var path = svg.append("g")
-			.selectAll("path").data(force.links()).enter().append("path")
+			.selectAll("path").data(link.links()).enter().append("path")
 			.attr("class",function(d) {return "hypertree-link " + d.type; })
 			.attr("marker-end", function(d) { return "url(#" + d.type + ")";});
-		var circle = svg.append("g").selectAll("circle").data(force.nodes()).enter().append("circle").attr("r", 4).call(force.drag);
+		var circle = svg.append("g").selectAll("circle").data(simulation.nodes()).enter().append("circle").attr("r", 4).call(d3.drag());
 		var text = svg.append("g")
-			.selectAll("text").data(force.nodes()).enter().append("text").attr("x", 8).attr("y", ".31em")
+			.selectAll("text").data(simulation.nodes()).enter().append("text").attr("x", 8).attr("y", ".31em")
 			.attr("style", function(d) {return d.type == "Outbound" ? "fill:#888888;" : "fill:#000000;";})
 			.text(function(d) {return d.name;});
-		function tick() {
+		function ticked() {
 		  path.attr("d", linkArc);
 		  circle.attr("transform", transform);
 		  text.attr("transform", transform);

htroot/jslicense.html

@@ -99,9 +99,9 @@
 			<td><a href="env/bootstrap/js/typeahead.jquery.js">typeahead.jquery.js</a> (0.10.5)</td>
 		</tr>
 		<tr>
-			<td><a href="js/d3.v3.min.js">d3.v3.min.js</a></td>
+			<td><a href="js/d3.v5.min.js">d3.v5.min.js</a></td>
 			<td><a href="http://opensource.org/licenses/BSD-3-Clause">Modified-BSD</a></td>
-			<td><a href="https://raw.githubusercontent.com/d3/d3.github.com/b3382f60bf721923c7c649709adcfb4c8b66d994/d3.v3.js">d3.v3.js</a>  (3.4.4)</td>
+			<td><a href="https://unpkg.com/d3@5.7.0/dist/d3.js">d3.js</a>  (5.7.0)</td>
 		</tr>
 		<tr>
 			<td><a href="js/highslide/highslide.js">highslide.js</a></td>