add coloers to branchs

Author: aquinojardim

src/app/components/Chart.jsx

@@ -14,6 +14,8 @@
 import React, { Component } from 'react';
 import * as d3 from 'd3';
 
+const colors = ['#2C4870','#519331','#AA5039','#8B2F5F','#C5B738','#858DFF', '#FF8D02','#FFCD51','#ACDAE6','#FC997E','#CF93AD','#AA3939','#AA6C39','#226666',]
+
 let root = {};
 class Chart extends Component {
   constructor(props) {
@@ -102,10 +104,16 @@ 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');
+      .style('fill', function (d) {
+        console.log('this is d', d)
+        return colors[d.data.branch]
       })
+      .attr('class', 'node--internal')
+      // })
+      //  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');
+      // })
       .attr('transform', function (d) {
         return 'translate(' + reinfeldTidierAlgo(d.x, d.y) + ')';
       });

src/app/styles/components/d3graph.css

@@ -6,41 +6,43 @@ body {
 
 .node {
   cursor: pointer;
+  fill-opacity: 0.8;
 }
 
 /*   this represents leaf nodes aka nodes with no children */
-.node circle {
+/* .node circle {
   fill: #5249f7;
-}
+} */
 
 /* .node circle:hover {
   fill: #320a5c;
 } */
 
 .node text {
+  fill: #fae6e4;
   font-size: 10px;
   font-family: "Overpass Mono", monospace;
 }
 
 
 /* this represents text for leaf nodes aka the ones with no children */
-.node--leaf {
+/* .node--leaf {
   fill: #71e9e1;
   fill-opacity: 0.8;
-}
+} */
 
 /*   this represents those nodes that have children */
-.node--internal circle {
+/* .node--internal circle {
   fill: #d317c9;
-}
+} */
 /*   modifies text of parent nodes (has children) */
 .node--internal text {
-  fill: #fae6e4;
+  fill: white;
   font-size: 10px;
 }
 .link {
   fill: none;
-  stroke: #3853ea;
+  stroke:#fae6e4;;
   stroke-opacity: 0.4;
   stroke-width: 3px;
 }