feat(codeflower): add code flower drags

inherd · Mar 3, 2021 · 90964e3 · 90964e3
1 parent f2063d5
commit 90964e3
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 12 deletions.
diff --git a/web/index.html b/web/index.html
@@ -85,6 +85,8 @@
 <body>
 <h1>Coco Reporter</h1>
 
+<div id="code-flower"></div>
+
 <h1>Coding Skills</h1>
 <h2>Code Frequency</h2>
 <select id="code-frequency-select"></select>
@@ -118,7 +120,6 @@ <h2>Package by Size 1</h2>
 <h2>Package by Size 2</h2>
 <div id="nested-treemap"></div>
 <h2>Coder Flower</h2>
-<div id="code-flower"></div>
 
 <h1>Organizational Culture</h1>
 <div class="layout-grid2x2">
@@ -140,6 +141,7 @@ <h2>Commits Tree</h2>
 <div id="commits-tree"></div>
 
 <script src="public/js/libs/d3.min.js"></script>
+<script src="public/js/libs/d3-force.v2.min.js"></script>
 
 <script src="public/js/graph-config.js"></script>
 

diff --git a/web/public/js/graph/cloc/code-flower.js b/web/public/js/graph/cloc/code-flower.js
@@ -16,8 +16,8 @@ function renderCodeFlower(data, selector) {
   let w = GraphConfig.width;
   let h = GraphConfig.height;
 
-  const links = data.links.map(d => Object.create(d));
-  const nodes = data.nodes.map(d => Object.create(d));
+  const links = data.links;
+  const nodes = data.nodes;
 
   d3.select(selector).selectAll("svg").remove();
   const svg = d3.select(selector).append("svg").attr("viewBox", [0, 0, w, h]);
@@ -48,19 +48,45 @@ function renderCodeFlower(data, selector) {
     .join("circle")
     .attr("r", 5)
     .attr("fill", color)
+    .call(drag(simulation));
 
   node.append("title")
     .text(d => d.id);
 
   simulation.on("tick", () => {
-    link
-      .attr("x1", d => d.source.x)
-      .attr("y1", d => d.source.y)
-      .attr("x2", d => d.target.x)
-      .attr("y2", d => d.target.y);
+      link
+        .attr("x1", d => d.source.x)
+        .attr("y1", d => d.source.y)
+        .attr("x2", d => d.target.x)
+        .attr("y2", d => d.target.y);
 
-    node
-      .attr("cx", d => d.x)
-      .attr("cy", d => d.y);
-  });
+      node
+        .attr("cx", d => d.x)
+        .attr("cy", d => d.y);
+    });
+
+  function drag() {
+    function dragstarted(event) {
+      if (!event.active) simulation.alphaTarget(0.3).restart();
+      event.subject.fx = event.subject.x;
+      event.subject.fy = event.subject.y;
+    }
+
+    function dragged(event) {
+      event.subject.fx = event.x;
+      event.subject.fy = event.y;
+    }
+
+    function dragended(event) {
+      if (!event.active) simulation.alphaTarget(0);
+      event.subject.fx = null;
+      event.subject.fy = null;
+    }
+
+    return d3.drag()
+      .on("start", dragstarted)
+      .on("drag", dragged)
+      .on("end", dragended);
+
+  }
 }