adjusted css for d3 nodes

Author: nusanam

src/app/components/Chart.jsx

@@ -88,12 +88,12 @@ class Chart extends Component {
       });
 
     node.append("circle")
-      .attr("r", 20)
+      .attr("r", 15)
 
     node
       .append("text")
       // adjusts the y coordinates for the node text
-      .attr("dy", "0.3em")
+      .attr("dy", "0.276em")
       .attr("x", function (d) {
         // this positions how far the text is from leaf nodes (ones without children)
         // negative number before the colon moves the text of rightside nodes, positive number moves the text for the leftside nodes

src/app/components/ChartOLD.jsx

@@ -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;
 

src/app/styles/components/d3graph.css

@@ -9,11 +9,11 @@
 }
 .node text {
   font-size: 15px;
-  font-family: 'Raleway', sans-serif;;
+  font-family: 'Raleway', sans-serif;
 }
 /* this represents text for leaf nodes aka the ones with no children */
 .node--leaf{
-  fill: #F4C1B6;
+  fill: #71e9e1;
 }
 
 /*   this represents those nodes that have children */
@@ -22,13 +22,14 @@
 }
 /*   modifies text of parent nodes (has children) */
 .node--internal text {
-  fill: white;
-  font-size: 25px;
+  fill: #fae6e4;
+  font-size: 19px;
 
 }
 .link {
   fill: none;
   stroke: #3853ea ;
   stroke-opacity: 0.4;
   stroke-width: 3px;
-}
+}
+