dc-js · christophe-g · Jan 27, 2016 · Jan 27, 2016 · Jan 27, 2016
diff --git a/.gitignore b/.gitignore
@@ -35,4 +35,4 @@ spec/index-browserify.html
 
 # font noise from some doc tool
 web/docs/public
-
+web/docs
diff --git a/dc.css b/dc.css
@@ -1,5 +1,15 @@
 div.dc-chart {
-    float: left;
+    float: left; /*Keep this for backward compatibity, but it should actually be removed*/
+}
+div.dc-responsive {
+    float: none; /*Keep this for backward compatibity, but it should actually be removed*/
+    height: 100%;
+}
+
+
+div.dc-responsive svg {
+    min-width: 100%;
+    min-height: 100%;
 }
 
 .dc-chart rect.bar {

diff --git a/src/base-mixin.js b/src/base-mixin.js
@@ -32,7 +32,7 @@ dc.baseMixin = function (_chart) {
         return (height && height > _minHeight) ? height : _minHeight;
     };
     var _heightCalc = _defaultHeightCalc;
-    var _width, _height;
+    var _width, _height, _responsive = false;
 
     var _keyAccessor = dc.pluck('key');
     var _valueAccessor = dc.pluck('value');
@@ -210,6 +210,23 @@ dc.baseMixin = function (_chart) {
         return _chart;
     };
 
+    /**
+     * Set or get the responsive behavior of the chart. 
+     *
+     * When the chart is responsive, it will automatically fit its container's dimension. For backward compatibilty, chart are not responsive by  default. 
+     * 
+     * @param {Boolean} [responsive]
+     * @return {Boolean}
+     * @return {dc.baseMixin}
+     */
+    _chart.responsive = function (responsive) {
+        if (!arguments.length) {
+            return _responsive;
+        }
+        _responsive = responsive;
+        return _chart;
+    };
+
     /**
      * **mandatory**
      *
@@ -466,6 +483,8 @@ dc.baseMixin = function (_chart) {
         return _chart;
     };
 
+
+
     /**
      * Returns the top SVGElement for this specific chart. You can also pass in a new SVGElement,
      * however this is usually handled by dc internally. Resetting the SVGElement on a chart outside
@@ -499,11 +518,28 @@ dc.baseMixin = function (_chart) {
         return generateSvg();
     };
 
+
+
     function sizeSvg () {
         if (_svg) {
-            _svg
-                .attr('width', _chart.width())
-                .attr('height', _chart.height());
+            if(_responsive) {
+                _svg
+                    .attr({
+                        width : '100%',
+                        height : '100%',
+                        viewBox : '0 0 ' + _chart.width() + ' ' + _chart.height()
+                        });
+                _root.classed(dc.constants.RESPONSIVE_CLASS, true);   
+            }
+            else {
+                _svg
+                    .attr({
+                        width : _chart.width(),
+                        height : _chart.height(),  
+                        viewBox : null
+                        });
+                _root.classed(dc.constants.RESPONSIVE_CLASS, false);   
+            }
         }
     }
 

diff --git a/src/core.js b/src/core.js
@@ -20,6 +20,7 @@ var dc = {
     version: '<%= conf.pkg.version %>',
     constants: {
         CHART_CLASS: 'dc-chart',
+        RESPONSIVE_CLASS: 'dc-responsive',
         DEBUG_GROUP_CLASS: 'debug',
         STACK_CLASS: 'stack',
         DESELECTED_CLASS: 'deselected',

diff --git a/web/css/dc.css b/web/css/dc.css
@@ -1,5 +1,15 @@
 div.dc-chart {
-    float: left;
+    float: left; /*Keep this for backward compatibity, but it should actually be removed*/
+}
+div.dc-responsive {
+    float: none; /*Keep this for backward compatibity, but it should actually be removed*/
+    height: 100%;
+}
+
+
+div.dc-responsive svg {
+    min-width: 100%;
+    min-height: 100%;
 }
 
 .dc-chart rect.bar {

diff --git a/web/examples/bar-responsive.html b/web/examples/bar-responsive.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>dc.js - Bar Chart Example</title>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" type="text/css" href="../css/dc.css" />
+</head>
+<style>
+.container {
+  width: 400px;
+  height: 400px;
+}
+
+.container.big-width {
+  width: 800px;
+}
+
+.container.big-height {
+  height: 600px;
+}
+</style>
+
+<body>
+  <a href="#" onclick="switchWidth()">switch width</a>
+  <a href="#" onclick="switchHeight()">switch height</a>
+  <div id="container" class="container">
+    <div id="test"></div>
+  </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.barChart('#test');
+  d3.csv('morley.csv', function(error, experiments) {
+
+    experiments.forEach(function(x) {
+      x.Speed = +x.Speed;
+    });
+
+    var ndx = crossfilter(experiments),
+      runDimension = ndx.dimension(function(d) {
+        return +d.Run;
+      }),
+      speedSumGroup = runDimension.group().reduceSum(function(d) {
+        return d.Speed * d.Run / 1000;
+      });
+
+    chart
+      // .width(700)
+      // .height(700)
+      .responsive(true)
+      .x(d3.scale.linear().domain([6, 20]))
+      .brushOn(false)
+      .yAxisLabel('This is the Y Axis!')
+      .dimension(runDimension)
+      .group(speedSumGroup)
+      .on('renderlet', function(chart) {
+        chart.selectAll('rect').on('click', function(d) {
+          console.log('click!', d);
+        });
+      });
+    chart.render();
+  });
+
+  var isBigWidth = false,
+    isBigHeight = false;
+
+  function switchWidth() {
+    var container = d3.select('#container');
+    container.classed('big-width', function() {
+      return isBigWidth = !isBigWidth;
+    });
+  }
+
+  function switchHeight() {
+    var container = d3.select('#container');
+    container.classed('big-height', function() {
+      return isBigHeight = !isBigHeight;
+    });
+  }
+  </script>
+</body>
+
+</html>
diff --git a/web/examples/index.html b/web/examples/index.html
@@ -10,43 +10,46 @@ <h2>Examples of using dc.js</h2>
   <tr>
     <td><a href="area.html">area</a></td>
     <td><a href="bar-extra-line.html">bar extra line</a></td>
+    <td><a href="bar-responsive.html">bar responsive</a></td>
     <td><a href="bar-single-select.html">bar single select</a></td>
     <td><a href="bar.html">bar</a></td>
-    <td><a href="box-plot-time.html">box plot time</a></td>
 <tr>
   <tr>
+    <td><a href="box-plot-time.html">box plot time</a></td>
     <td><a href="box-plot.html">box plot</a></td>
     <td><a href="complex-reduce.html">complex reduce</a></td>
     <td><a href="composite.html">composite</a></td>
     <td><a href="filtering-removing.html">filtering removing</a></td>
-    <td><a href="filtering.html">filtering</a></td>
 <tr>
   <tr>
+    <td><a href="filtering.html">filtering</a></td>
     <td><a href="heat.html">heat</a></td>
     <td><a href="heatmap-filtering.html">heatmap filtering</a></td>
     <td><a href="line.html">line</a></td>
     <td><a href="multi-focus.html">multi focus</a></td>
-    <td><a href="multi-scatter.html">multi scatter</a></td>
 <tr>
   <tr>
+    <td><a href="multi-scatter.html">multi scatter</a></td>
     <td><a href="number.html">number</a></td>
     <td><a href="ord.html">ord</a></td>
     <td><a href="pie-external-labels.html">pie external labels</a></td>
     <td><a href="pie.html">pie</a></td>
-    <td><a href="replacing-data.html">replacing data</a></td>
 <tr>
   <tr>
+    <td><a href="replacing-data.html">replacing data</a></td>
     <td><a href="right-axis.html">right axis</a></td>
     <td><a href="row.html">row</a></td>
     <td><a href="scatter-brushing.html">scatter brushing</a></td>
     <td><a href="scatter-series.html">scatter series</a></td>
-    <td><a href="scatter.html">scatter</a></td>
 <tr>
   <tr>
+    <td><a href="scatter.html">scatter</a></td>
     <td><a href="select.html">select</a></td>
     <td><a href="series.html">series</a></td>
     <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>
+  <tr>
     <td><a href="table-pagination.html">table pagination</a></td>
 <tr>
 </table>

diff --git a/web/js/d3.js b/web/js/d3.js
@@ -1,6 +1,6 @@
 !function() {
   var d3 = {
-    version: "3.5.12"
+    version: "3.5.13"
   };
   var d3_arraySlice = [].slice, d3_array = function(list) {
     return d3_arraySlice.call(list);