From 9ba0a4b34fa2e4993b8be021ee79d10d2674eba4 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 02 May 2022 16:14:51 +0000
Subject: [PATCH] fmt: remove semis :)

---
 assets/js/graph.js |   69 ++++++++++++++++++++--------------
 1 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/assets/js/graph.js b/assets/js/graph.js
index f0b1f7f..282df97 100644
--- a/assets/js/graph.js
+++ b/assets/js/graph.js
@@ -47,42 +47,42 @@
 
   const drag = simulation => {
     function dragstarted(event, d) {
-      if (!event.active) simulation.alphaTarget(1).restart();
-      d.fx = d.x;
-      d.fy = d.y;
+      if (!event.active) simulation.alphaTarget(1).restart()
+      d.fx = d.x
+      d.fy = d.y
     }
 
     function dragged(event, d) {
-      d.fx = event.x;
-      d.fy = event.y;
+      d.fx = event.x
+      d.fy = event.y
     }
 
     function dragended(event, d) {
-      if (!event.active) simulation.alphaTarget(0);
-      d.fx = null;
-      d.fy = null;
+      if (!event.active) simulation.alphaTarget(0)
+      d.fx = null
+      d.fy = null
     }
 
     const noop = () => { }
     return d3.drag()
       .on("start", enableDrag ? dragstarted : noop)
       .on("drag", enableDrag ? dragged : noop)
-      .on("end", enableDrag ? dragended : noop);
+      .on("end", enableDrag ? dragended : noop)
   }
 
-  const height = 250
+  const height = Math.max(document.getElementById("graph-container").offsetHeight, 250)
   const width = document.getElementById("graph-container").offsetWidth
 
   const simulation = d3.forceSimulation(data.nodes)
     .force("charge", d3.forceManyBody().strength(-30))
-    .force("link", d3.forceLink(data.links).id(d => d.id))
-    .force("center", d3.forceCenter());
+    .force("link", d3.forceLink(data.links).id(d => d.id).distance(40))
+    .force("center", d3.forceCenter())
 
   const svg = d3.select('#graph-container')
     .append('svg')
     .attr('width', width)
     .attr('height', height)
-    .attr("viewBox", [-width / 2, -height / 2, width, height]);
+    .attr("viewBox", [-width / 2, -height / 2, width, height])
 
   if (enableLegend) {
     const legend = [
@@ -115,19 +115,22 @@
     .data(data.nodes)
     .enter().append("g")
 
+  // calculate radius
+  const nodeRadius = (d) => {
+    const numOut = index.links[d.id]?.length || 0
+    const numIn = index.backlinks[d.id]?.length || 0
+    return 3 + (numOut + numIn) / 4
+  }
+
   // draw individual nodes
   const node = graphNode.append("circle")
     .attr("class", "node")
     .attr("id", (d) => d.id)
-    .attr("r", (d) => {
-      const numOut = index.links[d.id]?.length || 0
-      const numIn = index.backlinks[d.id]?.length || 0
-      return 3 + (numOut + numIn) / 4
-    })
+    .attr("r", nodeRadius)
     .attr("fill", color)
     .style("cursor", "pointer")
     .on("click", (_, d) => {
-      window.location.href = baseUrl + '/' + decodeURI(d.id).replace(/\s+/g, '-')
+      window.location.href = `${baseUrl}/${decodeURI(d.id).replace(/\s+/g, '-')}/`
     })
     .on("mouseover", function(_, d) {
       d3.selectAll(".node")
@@ -154,11 +157,12 @@
 
       // show text for self
       d3.select(this.parentNode)
-        .select("text")
         .raise()
+        .select("text")
         .transition()
         .duration(200)
         .style("opacity", 1)
+        .raise()
     }).on("mouseleave", function(_, d) {
       d3.selectAll(".node")
         .transition()
@@ -179,16 +183,19 @@
         .duration(200)
         .style("opacity", 0)
     })
-    .call(drag(simulation));
+    .call(drag(simulation))
 
   // draw labels
   const labels = graphNode.append("text")
-    .attr("dx", 12)
-    .attr("dy", ".35em")
+    .attr("dx", 0)
+    .attr("dy", d => nodeRadius(d) + 8 + "px")
+    .attr("text-anchor", "middle")
     .text((d) => content[d.id]?.title || d.id.replace("-", " "))
     .style("opacity", 0)
     .style("pointer-events", "none")
-    .call(drag(simulation));
+    .style("font-size", "0.4em")
+    .raise()
+    .call(drag(simulation))
 
   // set panning
 
@@ -197,10 +204,14 @@
       .extent([[0, 0], [width, height]])
       .scaleExtent([0.25, 4])
       .on("zoom", ({ transform }) => {
-        link.attr("transform", transform);
-        node.attr("transform", transform);
-        labels.attr("transform", transform);
-      }));
+        link.attr("transform", transform)
+        node.attr("transform", transform)
+        const scale = transform.k
+        const scaledOpacity = Math.max((scale - 1) / 3.75, 0)
+        labels
+          .attr("transform", transform)
+          .style("opacity", scaledOpacity)
+      }))
   }
 
   // progress the simulation
@@ -216,5 +227,5 @@
     labels
       .attr("x", d => d.x)
       .attr("y", d => d.y)
-  });
+  })
 }

--
Gitblit v1.10.0