Adopted margin convention from http://bl.ocks.org/3019563
authordeclerambaul <fabian.kaelin@gmail.com>
Mon, 2 Jul 2012 14:59:49 +0000 (16:59 +0200)
committerdeclerambaul <fabian.kaelin@gmail.com>
Mon, 2 Jul 2012 14:59:49 +0000 (16:59 +0200)
lib/chart/type/d3-chart.co

index 3e968d6..02c2c34 100644 (file)
@@ -51,9 +51,12 @@ class exports.D3ChartType extends ChartType
     renderChart: (data, viewport, options, lastChart) ->
         ### Starting with http://bost.ocks.org/mike/chart/
         
+
+        # margin convention http://bl.ocks.org/3019563
         margin = {top: 20, right: 20, bottom: 20, left: 20}
-        width  = 760
-        height = 320
+        width  = 760 - margin.left - margin.right
+        height = 320 - margin.top - margin.bottom
+
         xScale = d3.time.scale()
         yScale = d3.scale.linear()
         
@@ -67,12 +70,12 @@ class exports.D3ChartType extends ChartType
         # Update the x-scale with the extents of the dates.
         xScale
             .domain d3.extent dates
-            .range [ 0, width - margin.left - margin.right ]
+            .range [ 0, width ]
         
         # Update the y-scale with the extents of the data.
         yScale
             .domain d3.extent allValues
-            .range [ height - margin.top - margin.bottom, 0 ]
+            .range [ height, 0 ]
         
         
         # Hack. Remove svg if it exists. If @model changes, the graph will be redrawn
@@ -87,13 +90,13 @@ class exports.D3ChartType extends ChartType
                 .attr "class", "frame"
         
         # Update chart dimensions.
-        svg .attr "width", width
-            .attr "height", height
+        svg .attr "width", width + margin.left + margin.right
+            .attr "height", height + margin.top + margin.bottom
         
         frame = svg.select "g.frame"
             .attr "transform", "translate(#{margin.left},#{margin.top})"
-            .attr "width", width - margin.left - margin.right
-            .attr "height", height - margin.top - margin.bottom
+            .attr "width", width
+            .attr "height", height