feat(Vis View): ✨ Force Directed Graph: Customisable node colour

SkepticMystic · Aug 15, 2021 · e83d9ee · e83d9ee
1 parent f366bb0
commit e83d9ee
Showing 1 changed file with 13 additions and 5 deletions.
diff --git a/src/Visualisations/ForceDirectedG.ts b/src/Visualisations/ForceDirectedG.ts
@@ -18,15 +18,23 @@ export const forceDirectedG = (
     .append("input")
     .attr("height", 100)
     .attr("width", 100)
-    .attr("type", "color");
+    .attr("type", "color")
+    // Doesn't seem to work...
+    .attr("value", nodeColour);
 
   colourChange.on("change", function changeColor(el) {
-    const colour = el.target.value
+    const colour = el.target.value;
     node
       .transition()
-      .duration(500)
-      .style("fill", colour)
-      .attr("stroke", colour);
+      .duration(300)
+      .style("fill", (d) => {
+        if (d.index === currNodeIndex) return;
+        return colour;
+      })
+      .attr("stroke", (d) => {
+        if (d.index === currNodeIndex) return;
+        return colour;
+      });
   });
 
   const data = graphlibToD3(graph);