Adding some awesome transitions to the tooltip

dc-js · Nov 19, 2015 · 1e6d6d0 · 1e6d6d0
1 parent e274053
commit 1e6d6d0
Show file tree

Hide file tree

Showing 13 changed files with 116 additions and 39 deletions.
diff --git a/dc.css b/dc.css
@@ -53,6 +53,12 @@
     fill-opacity: .8;
 }
 
+.dc-chart .pie-slice path {
+    stroke-width: 1;
+    stroke: #FFFFFF;
+}
+
+
 .dc-chart .pie-path {
   fill:none;
   stroke-width: 2px;
@@ -297,6 +303,7 @@ g.dc-legend-item.fadeout {
     border: 2px solid #000000;
     pointer-events: none;
     user-select: none;
+    opacity: 0.8;
 }
 
 .dc-title:before,

diff --git a/dc.js b/dc.js
diff --git a/dc.js.map b/dc.js.map
diff --git a/dc.min.css b/dc.min.css
diff --git a/dc.min.js b/dc.min.js
diff --git a/dc.min.js.map b/dc.min.js.map
diff --git a/src/base-mixin.js b/src/base-mixin.js
@@ -1303,23 +1303,40 @@ dc.baseMixin = function (_chart) {
             data = d.data;
         }
 
-        var tooltip = d3.select('body')
-            .append('div')
-            .attr('class', 'dc-title')
-            .html(_title(data));
+        // get the tooltip
+        var tooltip = d3.select('.dc-title');
+
+        // the tooltip doesn't exist, so create it
+        if (tooltip.empty()) {
+            tooltip = d3.select('body')
+                .append('div')
+                .attr('class', 'dc-title')
+                .style('opacity', 0);
+        }
 
-        var style = {
-            'border-color': _chart.getColor(d.layer ? d : data, i),
-        };
+        // cancel any transitions
+        tooltip.interrupt();
+
+        // set the content of the tooltip
+        tooltip.html(_title(data));
 
+        // set the standard styles
+        tooltip.style('border-color', _chart.getColor(d.layer ? d : data, i));
+
+        // calculate the position of the tooltip
         var tooltipBounding = tooltip.node().getBoundingClientRect();
+        var style = {
+            opacity: 1,
+        };
 
+        // if a pie chart
         if (arc) {
             var gBounding = _chart.g().node().getBoundingClientRect();
             var centroid = arc.centroid(d);
 
             style.left = gBounding.left + (gBounding.width / 2) - (tooltipBounding.width / 2) + centroid[0];
             style.top = gBounding.top + (gBounding.height / 2) - tooltipBounding.height - 10 + centroid[1];
+        // all other charts
         } else {
             var elBounding = element.getBoundingClientRect();
 
@@ -1330,11 +1347,15 @@ dc.baseMixin = function (_chart) {
         style.top += 'px';
         style.left += 'px';
 
-        tooltip.style(style);
+        // move the tooltip into position
+        dc.transition(tooltip, _chart.transitionDuration() / 1.5)
+            .style(style);
     };
 
     _chart._removeTitle = function() {
-        d3.selectAll('.dc-title').remove();
+        dc.transition(d3.select('.dc-title'), _chart.transitionDuration() / 1.5)
+            .style('opacity', 0)
+            .remove();
     };
 
     /**

diff --git a/web/css/dc.css b/web/css/dc.css
@@ -53,6 +53,12 @@
     fill-opacity: .8;
 }
 
+.dc-chart .pie-slice path {
+    stroke-width: 1;
+    stroke: #FFFFFF;
+}
+
+
 .dc-chart .pie-path {
   fill:none;
   stroke-width: 2px;
@@ -297,6 +303,7 @@ g.dc-legend-item.fadeout {
     border: 2px solid #000000;
     pointer-events: none;
     user-select: none;
+    opacity: 0.8;
 }
 
 .dc-title:before,

diff --git a/web/css/dc.min.css b/web/css/dc.min.css