(imperfect) pie chart resizing

for #544 plus artifacts for last few commits
dc-js · Aug 5, 2015 · fdc10bc · fdc10bc
1 parent bb9c892
commit fdc10bc
Show file tree

Hide file tree

Showing 12 changed files with 89 additions and 25 deletions.
diff --git a/dc.js b/dc.js
diff --git a/dc.js.map b/dc.js.map
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/pie-chart.js b/src/pie-chart.js
@@ -41,6 +41,7 @@ dc.pieChart = function (parent, chartGroup) {
     var _emptyTitle = 'empty';
 
     var _radius,
+        _givenRadius, // specified radius, if any
         _innerRadius = 0,
         _externalRadiusPadding = 0;
 
@@ -85,7 +86,7 @@ dc.pieChart = function (parent, chartGroup) {
 
     function drawChart() {
         // set radius on basis of chart dimension if missing
-        _radius = _radius ? _radius : d3.min([_chart.width(), _chart.height()]) / 2;
+        _radius = _givenRadius ? _givenRadius : d3.min([_chart.width(), _chart.height()]) / 2;
 
         var arc = buildArcs();
 
@@ -113,6 +114,9 @@ dc.pieChart = function (parent, chartGroup) {
             removeElements(slices);
 
             highlightFilter();
+
+            dc.transition(_g, _chart.transitionDuration())
+                .attr('transform', 'translate(' + _chart.cx() + ',' + _chart.cy() + ')');
         }
     }
 
@@ -288,9 +292,9 @@ dc.pieChart = function (parent, chartGroup) {
     **/
     _chart.radius = function (r) {
         if (!arguments.length) {
-            return _radius;
+            return _givenRadius;
         }
-        _radius = r;
+        _givenRadius = r;
         return _chart;
     };
 

diff --git a/web/examples/index.html b/web/examples/index.html
@@ -29,15 +29,13 @@ <h2>Examples of using dc.js</h2>
     <td><a href="pie.html">pie</a></td>
 <tr>
   <tr>
-    <td><a href="resizing-coordinate-grid.html">resizing coordinate grid</a></td>
-    <td><a href="resizing-right-axis.html">resizing right axis</a></td>
     <td><a href="right-axis.html">right axis</a></td>
     <td><a href="scatter-brushing.html">scatter brushing</a></td>
     <td><a href="scatter-series.html">scatter series</a></td>
-<tr>
-  <tr>
     <td><a href="scatter.html">scatter</a></td>
     <td><a href="series.html">series</a></td>
+<tr>
+  <tr>
     <td><a href="stacked-bar.html">stacked bar</a></td>
     <td><a href="table-on-aggregated-data.html">table on aggregated data</a></td>
 <tr>

diff --git a/web/js/dc.js b/web/js/dc.js
diff --git a/web/js/dc.js.map b/web/js/dc.js.map
diff --git a/web/js/dc.min.js b/web/js/dc.min.js
diff --git a/web/js/dc.min.js.map b/web/js/dc.min.js.map
diff --git a/web/resizing/index.html b/web/resizing/index.html
@@ -9,6 +9,7 @@ <h2>Eyeball tests for resizing dc.js charts</h2>
 <table class="table">
   <tr>
     <td><a href="resizing-bar.html">resizing bar</a></td>
+    <td><a href="resizing-pie.html">resizing pie</a></td>
     <td><a href="resizing-right-axis.html">resizing right axis</a></td>
 <tr>
 </table>

diff --git a/web/resizing/resizing-pie.html b/web/resizing/resizing-pie.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>dc.js - Pie Chart Example</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+</head>
+<body>
+
+<div id="test"></div>
+
+<script type="text/javascript" src="../js/d3.js"></script>
+<script type="text/javascript" src="../js/crossfilter.js"></script>
+<script type="text/javascript" src="../js/dc.js"></script>
+<script type="text/javascript">
+
+var chart = dc.pieChart("#test");
+d3.csv("../examples/morley.csv", function(error, experiments) {
+
+  var ndx           = crossfilter(experiments),
+      runDimension  = ndx.dimension(function(d) {return "run-"+d.Run;})
+      speedSumGroup = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run;});
+
+  var adjustX = 20, adjustY = 40;
+  chart
+    .width(window.innerWidth-adjustX)
+    .height(window.innerHeight-adjustY)
+    .slicesCap(4)
+    .innerRadius(100)
+    .dimension(runDimension)
+    .group(speedSumGroup)
+    .legend(dc.legend());
+
+  window.onresize = function() {
+      chart
+          .width(window.innerWidth-adjustX)
+          .height(window.innerHeight-adjustY)
+          .redraw();
+  };
+
+  chart.render();
+});
+
+</script>
+
+</body>
+</html>