Q:

Angular d3 donut

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));
    };
}

A:

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

