This is a code excerpt from the book, D3 on Angular. http://leanpub.com/d3angularjs
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body ng-app="myApp" ng-controller="MainCtrl">
<donut-chart data="donutData1"></donut-chart>
<donut-chart data="donutData2"></donut-chart>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', function($scope){
d3.json('donut-data.json', function(err, data){
if(err){ throw err; }
$scope.donutData1 = data;
$scope.$apply();
});
$scope.donutData2 = [74, 56, 29, 11, 62];
});
myApp.directive('donutChart', function(){
function link(scope, el, attr){
var color = d3.scale.category10();
var width = 200;
var height = 200;
var min = Math.min(width, height);
var svg = d3.select(el[0]).append('svg');
var pie = d3.layout.pie().sort(null);
var arc = d3.svg.arc()
.outerRadius(min / 2 * 0.9)
.innerRadius(min / 2 * 0.5);
svg.attr({width: width, height: height});
// center the donut chart
var g = svg.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
// add the <path>s for each arc slice
var arcs = g.selectAll('path');
scope.$watch('data', function(data){
if(!data){ return; }
arcs = arcs.data(pie(data));
arcs.exit().remove();
arcs.enter().append('path')
.style('stroke', 'white')
.attr('fill', function(d, i){ return color(i) });
// update all the arcs (not just the ones that might have been added)
arcs.attr('d', arc);
}, true);
}
return {
link: link,
restrict: 'E',
scope: { data: '=' }
};
});
</script>
</body>
</html>[73, 34, 42, 89]