title: Update real time d3 chart by socket.io
body: <p>I am writing a d3.js-based real time chart directive. The structure looks like this:</p>
  
  <p><strong>myDirective.js</strong>:</p>
  
  <pre><code>app.directive('myDirective', function(socketio) {
  
    return {
      restrict: 'EA',
      templateUrl: '../../views/partials/chart.html',
      controller: DataController,
  
      link: function(scope, elem, attrs, ctrl) {
  
        scope.Watch = scope.$watch(function() {
          return ctrl.data;
        }, function(newVal) {
          // d3 code part
        });
  
        socketio.on(event, function(newdata) {
          ctrl.data.push(newdata);
          // redraw chart
        });
      }
    };
  });
  </code></pre>
  
  <p>In the above d3 code part, I refer to <em><a href="http://bl.ocks.org/gniemetz/4618602" rel="nofollow">http://bl.ocks.org/gniemetz/4618602</a></em>. The main code is almost the same and the chart is displayed well. </p>
  
  <p>Now I want to use socket.io to update the chart via code</p>
  
  <pre><code>socketio.on(event, function(newdata) {
    ctrl.data.push(newdata);
    // redraw chart
  });
  </code></pre>
  
  <p>but do not know how to redraw the chart efficiently with the updated 'ctrl.data'. I know in Morris.js, we could do this by '.setData(ctrl.data)' method, but do not know how to update in d3. Any idea?</p>
  
  <p>ps: I tried to copy/paste the d3 code above to this place, but there was always an error said: "TypeError: t.slice is not a function"</p>
  
  <p>Thanks,</p>