D3 Responsive

superf0sh · Oct 10, 2014 · f6f5353 · f6f5353
1 parent 27211b0
commit f6f5353
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/views/reports/_attachments/estilos.css b/views/reports/_attachments/estilos.css
@@ -153,7 +153,7 @@ aside {
         height:577px;
         padding-top: 1%;
     }
-        .seccion.treemap #chart{height: 560px}
+        .seccion.treemap #chart{height: 538px}
 .main{overflow-y: auto;height: 340px;overflow-x: hidden;}
 article.untercio{
     width: 293px;

diff --git a/views/reports/_attachments/treemap.html b/views/reports/_attachments/treemap.html
@@ -190,9 +190,11 @@ <h2>All Services
           }
     </style>
       <script>
-        var margin = {top: 10, right: 10, bottom: 10, left: 10},
-            width = 960,
-            height = 500;
+    var margin = {top: 10, left: 10, bottom: 10, right: 10}
+      , width = parseInt(d3.select('#chart').style('width'))
+      , width = width - margin.left - margin.right
+      , mapRatio = .5
+      , height = width * mapRatio;
 
         var color = d3.scale.category20c();
 
@@ -232,6 +234,15 @@ <h2>All Services
               .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
         }
 
+        d3.select(window).on('resize', resize);
+
+            function resize() {
+                // adjust things when the window size changes
+                width = parseInt(d3.select('#chart').style('width'));
+                width = width - margin.left - margin.right;
+                height = width * mapRatio;
+            }
+
             //function para traer parametros
             function getParameterByName( name ){
                 name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");