Update

rht · Feb 7, 2024 · 3676452 · 3676452
1 parent 2f5204e
commit 3676452
Showing 1 changed file with 18 additions and 19 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <head>
   <meta charset="utf-8">
-  <title>D3 v5 force simulation</title>
+  <title>SICP Graph</title>
   <style>
     text {
       font-family: sans-serif;
@@ -12,42 +12,41 @@
 </head>
 
 <body>
-  <svg width="1200" height="600"></svg>
   <script src="https://d3js.org/d3.v5.min.js"></script>
-    <!-- <script type="text/javascript" src="force.js"></script> -->
   <script type="module">
   // From https://stackoverflow.com/questions/63446134/javascript-d3-js-forced-directed-graph-with-label
 
   function gup( name ) {
     name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
-    var regexS = "[\\?&]"+name+"=([^&#]*)";
-    var regex = new RegExp( regexS );
-    var results = regex.exec( window.location.href );
+    const regexS = "[\\?&]"+name+"=([^&#]*)";
+    const regex = new RegExp( regexS );
+    const results = regex.exec( window.location.href );
     if( results === null )
       return null;
     else
       return results[1];
   }
-  var type = (gup("type") || "sicp").replace("/","");
+  const type = (gup("type") || "sicp").replace("/","");
 
 
   const graph = await d3.json("json/" + type + ".json")
   const color = d3.scaleOrdinal(d3.schemeCategory10)
 
-  var svg = d3.select("svg"),
-     width =  +svg.attr("width"),
-     height = +svg.attr("height");
+  d3.select('body').append('svg')
+    .attr('width', window.innerWidth)
+    .attr('height', window.innerHeight)
 
-  var link = svg.append("g")
+  const svg = d3.select("svg")
+
+  const link = svg.append("g")
     .selectAll("line")
     .data(graph.links)
     .enter()
     .append("line")
     .attr("stroke-width", 1)
     .attr("stroke", "black");
 
-
-  var node = svg.append("g")
+  const node = svg.append("g")
     .selectAll("g")
     .data(graph.nodes)
     .enter()
@@ -57,18 +56,18 @@
       .on("drag", dragged)
       .on("end", dragended));
 
-  var circles = node.append("circle")
+  const circles = node.append("circle")
     .data(graph.nodes)
     .attr("r", d => Math.max(5, Math.log('wordcount' in d ? d.wordcount: 5)))
     .attr("fill", d => color(d.group))
 
-  var labels = node.append("text")
-    .text(function(d){return d.name;});
+  const labels = node.append("text")
+    .text(d => d.name);
 
-  var simulation = d3.forceSimulation()
-    .force("link", d3.forceLink().id(function(d) { return d.id; }))
+  const simulation = d3.forceSimulation()
+    .force("link", d3.forceLink().id(d => d.id))
     .force("charge", d3.forceManyBody())
-    .force("center", d3.forceCenter(200, 150));
+    .force("center", d3.forceCenter(400, 400));
 
   simulation
     .nodes(graph.nodes)