added text colors for leaf nodes

Author: nusanam

src/app/components/Chart.jsx

@@ -96,13 +96,13 @@ class Chart extends Component {
       .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
-        return d.x < Math.PI === !d.children ? -20 : 23;
+        return d.x < Math.PI === !d.children ? -7 : 7;
       })
       .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) * 1 / Math.PI + ")"; })
       .text(function (d) {
-        return "state" + d.data.index;
+        return d.data.index;
       });
 
     function reinfeldTidierAlgo(x, y) {

src/app/styles/components/d3graph.css

@@ -1,13 +1,20 @@
 @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
+  body {
+    background-color: black;
+  }
 
-/* this represents leaf nodes aka no children */
+/*   this represents leaf nodes aka nodes with no children */
 .node circle {
   fill: #5249f7;
 }
 .node text {
-  font-size: 20px;
+  font-size: 15px;
   font-family: 'Raleway', sans-serif;;
 }
+/* this represents text for leaf nodes aka the ones with no children */
+.node--leaf{
+  fill: #F4C1B6;
+}
 
 /*   this represents those nodes that have children */
 .node--internal circle {
@@ -16,12 +23,12 @@
 /*   modifies text of parent nodes (has children) */
 .node--internal text {
   fill: white;
-  font-size: 30px;
+  font-size: 25px;
 
 }
 .link {
   fill: none;
   stroke: #3853ea ;
   stroke-opacity: 0.4;
-  stroke-width: 30px;
+  stroke-width: 3px;
 }