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'>
    <div ng-controller='MyCtrl'> {{model}}
    <donut-chart data='model'></donut-chart>
        <donut-chart data='model'></donut-chart>
        <donut-chart data='model'></donut-chart>
   </div>
</div>

JavaScript

var app = angular.module('myApp', []);
    
app.controller('MyCtrl', ['$scope', function MyCtrl($scope) {
        $scope.model = [ 12, 32, 32, 32 ];
    }]);
    

	app.directive('donutChart', function() {
	  return { restrict: 'E', 
	  scope: { data: '=' },
	  link: function(scope, element) {
	  	var data = scope.data;
	    // the D3 bits...
	    var color = d3.scale.category10();
	    var width = 500;
	    var height = 500;
	    var pie = d3.layout.pie().sort(null);
	    var arc = d3.svg.arc()
	      .outerRadius(width / 2 * 0.9)
	      .innerRadius(width / 2 * 0.5);
	    var svg = d3.select(element[0]).append('svg')
	      .attr({width: width, height: height})
	      .append('g')
	        .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
	    // add the <path>s for each arc slice
	    svg.selectAll('path').data(pie(data)) // our data
	      .enter().append('path')
	        .style('stroke', 'white')
	        .attr('d', arc)
	        .attr('fill', function(d, i){ return color(i) });
	  }};
	});