drawing graph

src/components/graph/drawGraph.js

@@ -1,118 +1,67 @@
-var margin = {top: 20, right: 10, bottom: 30, left: 40},
+import styles from "./graph.css";
+import renderQueue from "../continuous/renderQueue";
+
+const margin = {top: 20, right: 10, bottom: 30, left: 40},
     width = 960 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;
 
-var svg = d3.select("body").append("svg")
-  .attr("width", width + margin.left + margin.right)
-  .attr("height", height + margin.top + margin.bottom)
-  .append("g")
-    .attr("transform", "translate(" + margin.left + " " + margin.top + ")");
-
-var factory = d3.geom.quadtree()
-  .extent([
-    [0, 0],
-    [width, height]
-  ]);
-
-var x = d3.scale.linear()
+const x = d3.scaleLinear()
   .range([0, width]);
 
-var y = d3.scale.linear()
+const y = d3.scaleLinear()
   .range([height, 0]);
 
-var xAxis = d3.svg.axis()
-  .scale(x)
-  .orient("bottom");
+/******************************************
+*******************************************
+                  Main
+*******************************************
+******************************************/
 
-var yAxis = d3.svg.axis()
-  .scale(y)
-  .orient("left");
+const drawGraph = (data) => {
 
-var xg = svg.append("g")
-  .attr("class", "x axis")
-  .attr("transform", "translate(0," + height + ")");
+  var svg = d3.select("#graphAttachPoint").append("svg")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+    .attr("class", `${styles.graphSVG}`)
+    .append("g")
+      .attr("transform", "translate(" + margin.left + " " + margin.top + ")");
 
-var yg = svg.append("g")
-  .attr("class", "y axis");
+  var chartArea = d3.select("#graphAttachPoint").append("div")
+    .style("left", margin.left + "px")
+    .style("top", margin.top + "px");
 
-var chartArea = d3.select("body").append("div")
-  .style("left", margin.left + "px")
-  .style("top", margin.top + "px");
+  var canvas = chartArea.append("canvas")
+    .attr("width", width)
+    .attr("height", height)
+    .attr("class", `${styles.graphCanvas}`);
 
-var canvas = chartArea.append("canvas")
-  .attr("width", width)
-  .attr("height", height);
+  var context = canvas.node().getContext("2d");
 
-var context = canvas.node().getContext("2d");
+  context.fillStyle = "rgba(0,0,0,.5)";
 
-context.fillStyle = "#f0f";
+  const draw = () => {
 
-// Layer on top of canvas, example of selection details
-var highlight = chartArea.append("svg")
-  .attr("width", width)
-  .attr("height", height)
-    .append("circle")
-      .attr("r", 7)
-      .classed("hidden", true);
+    // Update canvas
+    context.clearRect(0, 0, width, height);
 
-redraw();
+    data.forEach((p, i) => {
 
-function redraw() {
+      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();
 
-  // Randomize the scale
-  var scale = 1 + Math.floor(Math.random() * 10);
+    });
+  }
 
-  // Redraw axes
-  x.domain([0, scale]);
-  y.domain([0, scale]);
-  xg.call(xAxis);
-  yg.call(yAxis);
-
-  var points = randomPoints(scale);
-
-  var tree = factory(points);
-
-  // Update canvas
-  context.clearRect(0, 0, width, height);
-
-  points.forEach(function(p,i){
-
-    context.beginPath();
-    context.arc(x(p[0]), y(p[1]), 5, 0, 2 * Math.PI);
-    context.fill();
-
-  });
-
-  canvas.on("mousemove",function(){
-
-    var mouse = d3.mouse(this),
-        closest = tree.find([x.invert(mouse[0]), y.invert(mouse[1])]);
-
-    highlight.attr("cx", x(closest[0]))
-      .attr("cy", y(closest[1]));
-
-  });
-
-  canvas.on("mouseover",function(){
-    highlight.classed("hidden", false);
-  });
-
-  canvas.on("mouseout",function(){
-    highlight.classed("hidden", true);
-  });
+  draw();
 
 }
 
-function randomPoints(scale) {
-
-  // Get points
-  return d3.range(1000).map(function(d){
-
-    return [
-      Math.random() * scale,
-      Math.random() * scale
-    ];
-
-  });
-
-}
+export default drawGraph;

src/components/graph/graph.css

@@ -1,15 +1,18 @@
-path,
-line {
+.graphCanvas path {
   shape-rendering: crispEdges;
 }
 
-div,
-svg,
-canvas {
+#graphWrapper {
+  position: relative;
+}
+
+#graphAttachPoint,
+.graphSVG,
+.graphCanvas {
   position: absolute;
 }
 
-svg {
+#graphSVG {
   pointer-events: none;
 }
 

src/components/graph/graph.js

@@ -1,34 +1,31 @@
 import React from 'react';
 import _ from "lodash";
-// import styles from "./joy.css";
-// import drawGraph from "./drawGraph";
-// import joyParser from "./joyParser";
+import styles from "./graph.css";
+import drawGraph from "./drawGraph";
 
 class Graph extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
-
+      drawn: false,
     };
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.data) {
-      console.log('graph data 55', nextProps.data)
-      // drawGraph(graphParser(nextProps.data));
+    /* 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});
     }
   }
 
-  componentDidMount() {
-
-  }
-
   render() {
     return (
-      <div id="joyplot_wrapper" style={{marginTop: 50}}>
+      <div id="graphWrapper">
         <h3> Graph </h3>
-        <div id="joyplot"> </div>
+        <div id="graphAttachPoint"> </div>
       </div>
     )
   }