Merge pull request #23 from oslabs-beta/d3-implementation

D3 implementation

Author: yujinkay

.gitignore

@@ -9,3 +9,4 @@ src/extension/build.zip
 src/extension/build.crx
 src/extension/build/key.pem
 package/__tests__
+bower_components

assets/reactime with website svg.svg

@@ -59,9 +59,10 @@
     "webpack-cli": "^3.3.6"
   },
   "dependencies": {
-    "acorn": "^7.1.0",
-    "acorn-jsx": "^5.0.2",
+    "bower": "^1.8.8",
     "d3": "^4.13.0",
+    "d3-tip": "^0.9.1",
+    "d3-zoom": "^1.8.3",
     "immer": "^3.2.0",
     "jsondiffpatch": "^0.3.11",
     "prop-types": "^15.7.2",

assets/readme-logo-svg.svg

@@ -5,6 +5,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import * as d3 from 'd3';
+import d3Tip from "d3-tip";
 
 let root = {};
 class Chart extends Component {
@@ -35,17 +36,31 @@ class Chart extends Component {
 
   maked3Tree() {
     this.removed3Tree();
-    let width = 900;
-    let height = 1000;
+    let width = 600;
+    // let height = 1060;
+    const margin = {
+      top: 0,
+      right: 60,
+      bottom: 80,
+      left: 120,
+    };
+    // const width = 600 - margin.right - margin.left;
+    const height = 700 - margin.top - margin.bottom;
+
     let chartContainer = d3.select(this.chartRef.current)
       .append('svg') // chartContainer is now pointing to svg
       .attr('width', width)
       .attr('height', height);
-
-    let g = chartContainer
+    
+    chartContainer.call(d3.zoom()
+      .on("zoom", function () {
+        chartContainer.attr("transform", d3.event.transform)
+      }))
       .append("g")
+
+    let g = chartContainer.append("g")
       // this is changing where the graph is located physically
-      .attr("transform", `translate(${width / 2.5}, ${height / 2 + 90})`);
+      .attr("transform", `translate(${width / 2 + 4}, ${height / 2 + 2})`);
 
     // if we consider the container for our radial node graph as a box encapsulating, half of this container width is essentially the radius of our radial node graph
     let radius = width / 2;
@@ -55,7 +70,8 @@ class Chart extends Component {
 
     let tree = d3.tree()
       // this assigns width of tree to be 2pi
-      .size([2 * Math.PI, radius])
+      .size([2 * Math.PI, radius / 1.5])
+      .separation(function (a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth });
 
     let d3root = tree(hierarchy);
 
@@ -74,6 +90,7 @@ class Chart extends Component {
       .data(d3root.descendants())
       .enter()
       .append("g")
+      //  assigning class to the node based on whether node has children or not
       .attr("class", function (d) {
         return "node" + (d.children ? " node--internal" : " node--leaf")
       })
@@ -82,21 +99,41 @@ class Chart extends Component {
       });
 
     node.append("circle")
-      .attr("r", 5.5)
+      .attr("r", 12)
+
+    //creating a d3.tip method where the html has a function that returns the data we passed into tip.show from line 120
+    let tip = d3Tip()
+      .attr("class", "d3-tip")
+      .html(function (d) { return "State: " + d; })
+    
+      //invoking tooltip for nodes
+    node.call(tip)
 
     node
       .append("text")
-      .attr("dy", "0.1em")
+      // adjusts the y coordinates for the node text
+      .attr("dy", "0.35em")
       .attr("x", function (d) {
         // this positions how far the text is from leaf nodes (ones without children)
-        return d.x < Math.PI === !d.children ? 10 : -10;
+        // negative number before the colon moves the text of rightside nodes, positive number moves the text for the leftside nodes
+        return d.x < Math.PI === !d.children ? -4 : 5;
       })
       .attr("text-anchor", function (d) { return d.x < Math.PI === !d.children ? "start" : "end"; })
       // this arranges the angle of the text
-      .attr("transform", function (d) { return "rotate(" + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 180 / Math.PI + ")"; })
+      .attr("transform", function (d) { return "rotate(" + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 1 / Math.PI + ")"; })
       .text(function (d) {
-        return "state" + d.data.index;
+        return d.data.index;
       });
+    
+    //applying tooltip on mouseover and removes it when mouse cursor moves away
+    node
+      .on('mouseover', function (d) {
+        // without JSON.stringify, data will display as object Object
+        // console.log('d.data --> ', JSON.stringify(d.data))
+        let displayedState;
+        tip.show(JSON.stringify(d.data.stateSnapshot.children[0].state), this)
+      })
+      .on('mouseout', tip.hide)
 
     function reinfeldTidierAlgo(x, y) {
       return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];

package-lock.json

@@ -107,6 +107,11 @@ class Chart extends Component {
         .on('mouseover', mouseover)
         .on('mouseout', mouseout)
         .on('mousemove', d => mousemove(d));
+      
+      function mousemove(d) {
+        div
+          .text(!d.state ? 'No state found' : JSON.stringify(d.state, null, 4))
+      }
 
       nodeEnter
         .append('circle')
@@ -228,13 +233,6 @@ class Chart extends Component {
         .style('display', 'none');
     }
 
-    function mousemove(d) {
-      div
-        .text(!d.state ? 'No state found' : JSON.stringify(d.state, null, 4))
-        .style('left', `${d3.event.pageX}px`)
-        .style('top', `${d3.event.pageY}px`);
-    }
-
     update(root);
     duration = 750;
 

package.json

@@ -1,4 +1,4 @@
-.d3Container{
+/* .d3Container{
     height: 100%;
     width: 100%;
 }
@@ -37,4 +37,4 @@ div.tooltip {
     background: #ffff;
     border: solid 1px #aaa;
     border-radius: 8px;
-}
+} */