using graph.render instead of innerHTML=''

app/scripts/controllers/main.js

@@ -11,6 +11,12 @@ angular.module('d3chartsApp')
     ];
     $scope.renderer = 'line';
 
+    $scope.sightingsByDate = [{
+      x: 0,
+      y: 0,
+      y0: 0
+    }];
+
     $http.get('data/sightings.json').success(function(result) {
 
       var sightings = _(result)
@@ -26,8 +32,6 @@ angular.module('d3chartsApp')
         })
         .value();
 
-
-
       $scope.sightingsByDate = _(sightings)
         .chain()
         .countBy(function(sighting) {

app/scripts/directives/rickshawChart.js

@@ -3,52 +3,100 @@
 
 angular.module('d3chartsApp')
   .directive('rickshawChart', function() {
-    return {
-      scope: {
-        data: '=',
-        renderer: '='
-      },
-      template: '<div></div>',
-      restrict: 'E',
-      link: function postLink(scope, element, attrs) {
-        scope.$watchCollection('[data, renderer]', function(newVal, /* jshint unused: vars */ oldVal) {
-          if (!newVal[0]) {
-            return;
+    var graph;
+    var yAxis;
+    var xAxis;
+
+    /**
+     * Based on example of D3 in Angular
+     * https://github.com/3DGenomes/angular-d3js
+     */
+    var link = function postLink(scope, element, attrs) {
+      // execute properly within Angular scope life cycle
+      scope.safeApply = function(fn) {
+        var phase = this.$root.$$phase;
+        if (phase === '$apply' || phase === '$digest') {
+          if (fn && (typeof(fn) === 'function')) {
+            fn();
           }
-          element[0].innerHTML = '';
-          var graph = new Rickshaw.Graph({
-            element: element[0],
-            width: attrs.width,
-            height: attrs.height,
-            series: [{
-              data: scope.data,
-              color: attrs.color
-            }],
-            renderer: scope.renderer
-          });
-
-
-          var yAxis = new Rickshaw.Graph.Axis.Y({
-            graph: graph
-          });
-          yAxis.render();
+        } else {
+          this.$apply(fn);
+        }
+      };
 
+      graph = graph || new Rickshaw.Graph({
+        element: element[0],
+        width: attrs.width,
+        height: attrs.height,
+        series: [{
+          data: scope.data,
+          color: attrs.color
+        }],
+        renderer: scope.renderer
+      });
 
-          var xAxis = new Rickshaw.Graph.Axis.Time({
-            graph: graph
-          });
-          xAxis.render();
+      yAxis = yAxis || new Rickshaw.Graph.Axis.Y({
+        graph: graph
+      });
 
-          new Rickshaw.Graph.HoverDetail({
-            graph: graph,
-            formatter: function(series, x, y, formattedX, formattedY, /* jshint unused: vars */ d) {
-              return formattedY;
-            }
-          });
+      xAxis = xAxis || new Rickshaw.Graph.Axis.Time({
+        graph: graph
+      });
 
-          graph.render();
+      var hover = hover || new Rickshaw.Graph.HoverDetail({
+        graph: graph,
+        formatter: function(series, x, y, formattedX, formattedY, /* jshint unused: vars */ d) {
+          return formattedY;
+        }
+      });
 
+      scope.render = function() {
+        scope.safeApply(function() {
+          yAxis.render();
+          xAxis.render();
+          graph.setRenderer(scope.renderer);
+          graph.series[0].data = scope.data || [{
+            x: 10,
+            y: 10
+          }];
+          graph.render();
         });
-      }
+      };
+
+      scope.$watchCollection('[data, renderer]', function(newVal, /* jshint unused: vars */ oldVal) {
+        if (newVal[0] && scope.data === newVal[0]) {
+          scope.data = newVal[0];
+        }
+        if (newVal[1] && scope.renderer === newVal[1]) {
+          scope.renderer = newVal[1];
+        }
+        scope.render();
+      });
+
+      /* 
+       * component ie. directive === parentNode
+       */
+      var component = element[0].parentNode;
+      // render D3 chart on initialize and resize 
+      scope.$watch(function() {
+        var w = component.clientWidth;
+        var h = component.clientHeight;
+        return w + h;
+      }, function() {
+        graph.width = component.clientWidth;
+        graph.height = component.clientHeight;
+        scope.render();
+      });
+
+    };
+
+    return {
+      scope: {
+        data: '=',
+        renderer: '='
+      },
+      template: '<div></div>',
+      restrict: 'E',
+      link: link
     };
   });

karma.conf.js

@@ -17,6 +17,8 @@ module.exports = function(config) {
       'app/bower_components/angular-cookies/angular-cookies.js',
       'app/bower_components/angular-sanitize/angular-sanitize.js',
       'app/bower_components/angular-route/angular-route.js',
+      'app/bower_components/rickshaw/vendor/d3.v2.js',
+      'app/bower_components/rickshaw/rickshaw.js',
       'app/scripts/*.js',
       'app/scripts/**/*.js',
       'test/mock/**/*.js',

test/spec/directives/rickshawChart.js

@@ -1,20 +1,72 @@
 'use strict';
 
-describe('Directive: rickshawChart', function () {
+var debugMode = true;
+describe('Directive: rickshawChart', function() {
 
   // load the directive's module
   beforeEach(module('d3chartsApp'));
 
-  var element,
-    scope;
+  describe('multiple charts', function() {
+    var element, scope, compileFunction;
 
-  beforeEach(inject(function ($rootScope) {
-    scope = $rootScope.$new();
-  }));
+    beforeEach(inject(function($rootScope, $compile) {
+      scope = $rootScope.$new();
+      scope.sightingsByDate = [{
+        x: 1199145600,
+        y: 39,
+        y0: 0
+      }, {
+        x: 1199232000,
+        y: 13,
+        y0: 0
+      }];
+      scope.sightingsByDate2 = [{
+        x: 1199145600,
+        y: 59,
+        y0: 0
+      }, {
+        x: 1199232000,
+        y: 30,
+        y0: 0
+      }];
+      scope.renderers = [
+        'line',
+        'bar',
+        'scatterplot',
+        'area'
+      ];
+      scope.renderer = 'line';
+
+      element = angular.element('<rickshaw-chart data="sightingsByDate" renderer="renderer" color="steelblue" width="700" height="450">' + 
+        '</rickshaw-chart><rickshaw-chart data="sightingsByDate2" renderer="renderer" color="steelblue" width="700" height="450"></rickshaw-chart>');
+      element = $compile(element)(scope);
+
+      compileFunction = $compile(element);
+      if (debugMode) {
+        console.log('post compile', element.html()); // <== html here has {{}}
+      }
+    }));
+
+    it('should make a chart element with only contents from scope', function() {
+      inject(function() {
+        compileFunction(scope); // <== the html {{}} are bound
+         scope.$digest();
+        if (!scope.$$phase) {
+          scope.$digest(); // <== digest to get the render to show the bound values
+        }
+
+        if (debugMode) {
+          console.log('post link', element.html());
+          console.log('scope sightingsByDate ', scope.sightingsByDate);
+          console.log(angular.element());
+        }
+        expect(angular.element(element.find('div')[0]).text().trim()).toEqual('');
+        var svg = angular.element(element.find('svg'));
+        expect(svg.length).toEqual(0);
+        expect(angular.element(element.find('.detail')).length).toEqual(0);
+      });
+    });
+
+  });
 
-  it('should make hidden element visible', inject(function ($compile) {
-    element = angular.element('<rickshaw-chart></rickshaw-chart>');
-    element = $compile(element)(scope);
-    expect(element.text()).toBe('');
-  }));
 });