graph componetized

src/components/graph/drawGraph.js

@@ -11,13 +11,15 @@ const x = d3.scaleLinear()
 const y = d3.scaleLinear()
   .range([height, 0]);
 
+const cellFillColor = "rgba(0,0,0,.5)";
+
 /******************************************
 *******************************************
-                  Main
+          put svg & canvas in DOM
 *******************************************
 ******************************************/
 
-const drawGraph = (data) => {
+export const setupGraphElements = (data) => {
 
   var svg = d3.select("#graphAttachPoint").append("svg")
     .attr("width", width + margin.left + margin.right)
@@ -37,31 +39,39 @@ const drawGraph = (data) => {
 
   var context = canvas.node().getContext("2d");
 
-  context.fillStyle = "rgba(0,0,0,.5)";
-
-  const draw = () => {
-
-    // Update canvas
-    context.clearRect(0, 0, width, height);
-
-    data.forEach((p, i) => {
-
-      context.beginPath();
-      /* context.arc(x,y,r,sAngle,eAngle,counterclockwise); */
-      context.arc(
-        x(p[1]),            /* x */
-        y(p[2]),            /* y */
-        2,                  /* r */
-        0,                  /* sAngle */
-        2 * Math.PI         /* eAngle */
-      );
-      context.fill();
-
-    });
+  return {
+    svg,
+    context
   }
 
-  draw();
-
 }
 
-export default drawGraph;
+/******************************************
+*******************************************
+        draw cells on the canvas
+*******************************************
+******************************************/
+
+export const drawGraph = (data, context) => {
+
+  /* clear canvas */
+  context.clearRect(0, 0, width, height);
+
+  /* shuffle the data to overcome render order hiding cells */
+  data = d3.shuffle(data);
+
+  /* loop! */
+  data.forEach((p, i) => {
+    context.beginPath();
+    /* context.arc(x,y,r,sAngle,eAngle,counterclockwise); */
+    context.arc(
+      x(p[1]),            /* x */
+      y(p[2]),            /* y */
+      2,                  /* r */
+      0,                  /* sAngle */
+      2 * Math.PI         /* eAngle */
+    );
+    context.fill();
+    context.fillStyle = cellFillColor;
+  });
+}

src/components/graph/graph.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from "lodash";
 import styles from "./graph.css";
-import drawGraph from "./drawGraph";
+import {setupGraphElements, drawGraph} from "./drawGraph";
 
 class Graph extends React.Component {
 
@@ -9,18 +9,29 @@ class Graph extends React.Component {
     super(props);
     this.state = {
       drawn: false,
+      svg: null,
+      context: null,
     };
   }
 
   componentWillReceiveProps(nextProps) {
     /* maybe should do a check here to confirm ref exists and pass it? */
-    if (nextProps.data && !this.state.drawn) {
-      console.log('About to draw graph. Data:', nextProps.data)
-      drawGraph(nextProps.data.data)
-      this.setState({drawn: true});
+    if (
+      nextProps.data &&
+      this.state.context
+    ) {
+      drawGraph(
+        nextProps.data.data,
+        this.state.context
+      );
     }
   }
 
+  componentDidMount() {
+    const {svg, context} = setupGraphElements();
+    this.setState({svg, context});
+  }
+
   render() {
     return (
       <div id="graphWrapper">