added d3 css styling and updated d3 layout algorithm to change angle of node text

Author: nusanam

src/app/components/Chart.jsx

@@ -6,6 +6,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import * as d3 from 'd3';
 
+
 let root = {};
 let duration = 750;
 class Chart extends Component {
@@ -38,8 +39,8 @@ class Chart extends Component {
 
   maked3Tree() {
     this.removed3Tree();
-    let width = 900;
-    let height = 1000;
+    let width = 960;
+    let height = 1060;
     let chartContainer = d3.select(this.chartRef.current)
       .append('svg') // chartContainer is now pointing to svg
       .attr('width', width)
@@ -48,7 +49,7 @@ class Chart extends Component {
     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;
@@ -59,6 +60,7 @@ class Chart extends Component {
     let tree = d3.tree()
       // this assigns width of tree to be 2pi
       .size([2 * Math.PI, radius])
+      .separation(function (a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth });
 
     let d3root = tree(hierarchy);
 
@@ -77,6 +79,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")
       })
@@ -85,18 +88,19 @@ class Chart extends Component {
       });
 
     node.append("circle")
-      .attr("r", 5.5)
+      .attr("r", 40.5)
 
     node
       .append("text")
       .attr("dy", "0.1em")
       .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 ? -20 : 20;
       })
       .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;
       });

src/app/styles/components/_d3Tree.css

@@ -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;
-}
+} */

src/app/styles/components/d3graph.css

@@ -0,0 +1,22 @@
+/*   this represents leaf nodes aka no children */
+.node circle {
+  fill: #2e3634;
+}
+.node text {
+  font: 15px sans-serif;
+}
+
+/*   this represents those nodes that have children */
+.node--internal circle {
+  fill: teal;
+}
+/*   modifies text of parent nodes (has children) */
+.node--internal text {
+  fill: white;
+}
+.link {
+  fill: none;
+  stroke: #bfe3da;
+  stroke-opacity: 0.2;
+  stroke-width: 50px;
+}

src/app/styles/main.scss

@@ -18,7 +18,7 @@
 @import './components/rc-slider', './components/sliderHandle';
 
 // d3 chart component
-@import './components/d3Tree';
+@import './components/d3graph.css';
 
 // diff component
 @import './components/diff';