Angular d3 donut - angularjs

Question

I am trying to make a donut chart using d3 and angular however, I am stuck.Should I add all d3 code to function link or is there any other way? Moreover, I want this chart to be dynamic.
Here is the code for my directive:
angular.module('d3onut',[])
.directive('donut', function (){
function link(scope, elements, attr){
var data = scope.data;
};
return {
restrict: EA,
replace: true,
link : link,
scope: { data '='}
}
})
This is the d3 code, it mostly works but, any help in making it better is welcome
var data = [{
name: "one",
value: 75
}, {
name: "two",
value: 25
}, ];
var width = 100;
height = width;
var chart = d3.select("#circle-4")
.append('svg')
.attr("width", width)
.attr("height", height)
.append("gh")
.attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
var radius = Math.min(width, height) / 2;
var arc = d3.svg.arc()
.outerRadius(radius / 2)
.innerRadius(radius - 15);
var pie = d3.layout.pie()
.sort(null)
.startAngle(0)
.endAngle(2 * Math.PI)
.value(function (d) {
return d.value;
});
var color = d3.scale.ordinal()
.range(["#3399FF", "#e1e1e1"]);
var gh = chart.selectAll(".arc")
.data(pie(data))
.enter().append("gh")
.attr("class", "arc");
gh.append("path")
.attr("fill", function (d, i) {
return color(i);
})
.transition()
.ease("exp")
.duration(1000)
.attrTween("d", dpie);
function dpie(b) {
var i = d3.interpolate({
startAngle: 0,
endAngle: 1 * Math.PI
}, b);
return function (t) {
return arc(i(t));
};
}

Answer 1

Yes using the link is fine. You shluld use scope.$watch to watch for changes in your scope. This is a good tutorial.
http://www.ng-newsletter.com/posts/d3-on-angular.html