d3 tool tip, restyling

Author: mylee1995

src/app/components/Chart.jsx

@@ -3,6 +3,35 @@ import '../styles/components/_d3Tree.scss';
 import * as d3 from 'd3';
 
 var root={};
+let duration = 750;
+
+// var test={
+//     name: 'root',
+//     state: {
+//         "kids": 0,
+//         "kids1": 0,
+//         "kids2": 0,
+//         "kids3": 0,
+//         "kids4": 0,
+//         "kids5": {
+//             subkid: 3,
+//             subkid3: 5,
+//             sukid5:{
+//                 kid:1,
+//                 kid:3
+//             }
+//         },
+//         "kids6": 0,
+//         "kids7": 0,
+//         "kids8": 0,
+//         "kids9": 0,
+//         "kids10": 0,
+//         "kids11": 0,
+//         "kids12": 0,
+//         "kids13": 0,
+//     },
+//     children: [{name: 'hello',state:{name: "codesmith"}},{name: 'bye'}]
+// }
 
 class Chart extends Component {
     constructor(props){
@@ -31,15 +60,17 @@ class Chart extends Component {
     maked3Tree(){
         this.removed3Tree();
 
+        duration=0;
+        // root = test;
+
         var margin = {top: 20, right: 120, bottom: 20, left: 120},
             width = 960 - margin.right - margin.left,
             height = 800 - margin.top - margin.bottom;
 
-        var i = 0,
-            duration = 750;
+        var i = 0;
 
         var tree = d3.layout.tree()
-            .size([height, width]);
+            .size([400, 400]);
 
         var diagonal = d3.svg.diagonal()
             .projection(function(d) { return [d.y, d.x]; });
@@ -50,6 +81,14 @@ class Chart extends Component {
             .append("g")
             .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
+        // Add tooltip div
+        var div = d3.select("body").append("div")
+            .attr("class", "tooltip")
+            .style("opacity", 1e-6)
+            .on("mouseover", tipMouseover)
+            .on("mouseout", tipMouseout)
+
+
 
         root.x0 = height / 2;
         root.y0 = 0;
@@ -74,7 +113,9 @@ class Chart extends Component {
                 .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
                 .on("click", click)
                 .on("mouseover", mouseover)
-                .on("mouseout", mouseout);
+                .on("mouseout", mouseout)
+                .on("mousemove", function(d){mousemove(d);});
+
 
             nodeEnter.append("circle")
                 .attr("r", 1e-6)
@@ -85,6 +126,7 @@ class Chart extends Component {
                 .attr("dy", ".35em")
                 .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
                 .text(function(d) { return d.name; })
+                .style('fill', '#6FB3D2')
                 .style("fill-opacity", 1e-6);
 
             // Transition nodes to their new position.
@@ -93,8 +135,8 @@ class Chart extends Component {
                 .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
 
             nodeUpdate.select("circle")
-                .attr("r", 4.5)
-                .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
+                .attr("r", 7)
+                .style("fill", function(d) { return d._children ? "#A1C658" : "#D381C3"; });
 
             nodeUpdate.select("text")
                 .style("fill-opacity", 1);
@@ -158,17 +200,49 @@ class Chart extends Component {
 
         // Show state on mouse over
         function mouseover(d) {
-            d3.select(this).append("text")
-                .attr("class", "hover")
-                .attr('transform', function(d){ 
-                    return 'translate(5, -10)';
-                })
-                .text(d.state === undefined ? '' : JSON.stringify(d.state));
+            // d3.select(this).append("text")
+            //     .attr("class", "hover")
+            //     .attr('transform', function(d){ 
+            //         return 'translate(5, -10)';
+            //     })
+            //     .text(d.state === undefined ? '' : JSON.stringify(d.state));
+
+            div.transition()
+                .duration(300)
+                .style("display", "block")
+                .style("opacity", 1)
         }
 
-        // Toggle children on click.
         function mouseout(d) {
-            d3.select(this).select("text.hover").remove();
+            // d3.select(this).select("text.hover").remove();
+
+            div.transition()
+                .duration(3000)
+                .style("opacity", 1e-6)
+                .style("display", "none");
+        }
+
+        function tipMouseover(d){
+            div.transition()
+                .duration(300)
+                .style("opacity", 1);
+        }
+
+        function tipMouseout(d) {
+            // d3.select(this).select("text.hover").remove();
+
+            div.transition()
+                .duration(3000)
+                .style("opacity", 1e-6)
+                .style("display", "none");
+        }
+
+
+        function mousemove(d){
+            div
+                .text(d.state == undefined ? 'No state found' : JSON.stringify(d.state,null,4))
+                .style("left", (d3.event.pageX ) + "px")
+                .style("top", (d3.event.pageY) + "px");
         }
 
         function collapse(d) {
@@ -181,16 +255,14 @@ class Chart extends Component {
 
         // root.children.forEach(collapse);
         update(root);
+        duration = 750;
 
         // d3.select(self.frameElement).style("height", "800px");
 
     }
 
     render(){
-        return (
-            <div ref="anchor" className={'d3Container'} width={'100%'}>
-            </div>
-        )
+        return <div ref="anchor" className={'d3Container'} width={'100%'}></div>
     }
 }
 

src/app/styles/components/_d3Tree.scss

@@ -1,19 +1,54 @@
+.d3Container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .node {
     cursor: pointer;
-    }
+}
 
-    .node circle {
+.node circle {
     fill: #fff;
-    stroke: steelblue;
-    stroke-width: 1.5px;
-    }
+    stroke: black;
+    stroke-width: 2px;
+    
+}
 
-    .node text {
-    font: 10px sans-serif;
-    }
+.node text {
+    font: 15px sans-serif;
+    color: white;
+}
 
-    .link {
+.link {
     fill: none;
-    stroke: #ccc;
+    stroke: black;
     stroke-width: 1.5px;
-    }
+}
+
+div.tooltip {
+    white-space: pre;
+    position: absolute;
+    // display: flex;
+    // flex-direction: column;
+    // flex-wrap: nowrap;
+    // justify-content: center;
+    overflow-y: scroll;
+    overscroll-behavior: contain;
+    // align-items: center;
+    flex: auto;
+    // min-height: 10vh;
+    // min-width: 10vh;
+    // max-height: 100px;
+    // max-width: 50vh;
+    // text-align: center;
+    // width: 300px;
+    // height: 100px;
+    padding: 8px;
+    font: 15px sans-serif;
+    color: black;
+    background: #ffff;
+    border: solid 1px #aaa;
+    border-radius: 8px;
+    // pointer-events: none;
+}