index.html代碼如下：
<!DOCTYPE html>
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-resource.min.js"></script><script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body ng-app="myApp" ng-controller=MainCtrl><li ng-repeat="(priority, val) in priorityData"><span >{{priority}}</span><span >{{val}}</span></li><priority-graph data="priorityData"></priority-graph><script>
var myApp = angular.module('myApp', ['ngResource']);
//define app factory
myApp.factory('DataFac',function($resource){return $resource('priorityData.json',{});
});//define app controller
myApp.controller('MainCtrl',function($scope,DataFac){DataFac.get(function(response){$scope.priorityData = response.priority; })
});//define app directive
myApp.directive('priorityGraph', function(){function link(scope, el, attr){//set graph width,height and radiusvar width=960,height=500,radius=Math.min(width,height)/2;//set color rangevar color=d3.scale.ordinal().range(["rgb(166,60,48)", "rgb(229,144,78)", " rgb(221,226,77)", "rgb(157,211,72)", "rgb(40,106,151)"]);//set outer radius and inner radius for donut chartvar arc=d3.svg.arc().outerRadius(radius-80).innerRadius(radius-150);//watch data change from jsonscope.$watch('data', function(data){if(!data){ return; }//change json to two arrays for category and count//count arrayvar countArr=[];//category arrayvar categoryArr=[];//total number of issuesvar total=0;for (key in data){if(data.hasOwnProperty(key)){categoryArr.push(key);countArr.push(data[key]);total+=data[key];}}//get the graph parent elementel = el[0];// remove the graph if already exist, in case of repeatd3.select( el ).select( 'svg' ).remove();var pie=d3.layout.pie().sort(null).value(function(d){return d});var svg=d3.select(el).append("svg").attr("width",width).attr("height",height).append("g").attr("transform","translate("+width/2+","+height/2+")");var g=svg.selectAll(".arc").data(pie(countArr)).enter().append("g").attr("class","arc");//paint the grahg.append("path").attr("d",arc).style("fill",function(d,i){return color(i);});//paint the textg.append("text").attr("transform",function(d){return "translate("+arc.centroid(d)+")";}).attr("dy",".35em").style("text-anchor","middle").text(function(d,i){return categoryArr[i]+":"+countArr[i]});//paint total number in the middle of graphg.append("text").attr("dy", ".35em").style("text-anchor", "middle").text(function(d) { return total+" tickets"; });}, true);}return {link: link,restrict: 'E',scope: { data: '=' }};});</script>
</body>
</html>
