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:

    .directive('donut', function (){
        function link(scope, elements, attr){
         var 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 ="#circle-4")
    .attr("width", width)
    .attr("height", height)
    .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()
    .endAngle(2 * Math.PI)
    .value(function (d) {
    return d.value;

var color = d3.scale.ordinal()
    .range(["#3399FF", "#e1e1e1"]);

var gh = chart.selectAll(".arc")
    .attr("class", "arc");

    .attr("fill", function (d, i) {
    return color(i);
    .attrTween("d", dpie);

function dpie(b) {
    var i = d3.interpolate({
        startAngle: 0,
        endAngle: 1 * Math.PI
    }, b);
    return function (t) {
        return arc(i(t));
Problem courtesy of: user3913009


Yes using the link is fine. You shluld use scope.$watch to watch for changes in your scope. This is a good tutorial.

Solution courtesy of: Ouwen Huang


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.