D3.js and AngularJS directives

AngularJs + d3Js + bar chart example usign directives

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
  <div ng-repeat="object in myData">
    <div id="obj{{object.id}}">
        Text in html: {{object.id}}<br/>
        <bars-chart></bars-chart>        
    </div>
  </div> 
    (rectangles come from D3/svg)    
</div>

JavaScript

angular.module('myApp', []).
   directive('barsChart', function () {
     return {
         restrict: 'E',
         link: function (scope, element, attrs) {
             var chart = d3.select(element[0]).append('svg').attr({height: 20, width: 20});             
             chart.append('rect').attr({height: 10, width: 10});             
         } 
      };
   });

function Ctrl($scope, $timeout) {
    $scope.myData = [ {"id":"1"}, {"id":"2"}];
    
    // just to show that it reacts to changes in the data and will render more SVGs
    $timeout(function() {
        $scope.myData.push({"id":"3"});
    }, 3000);    
}