score:2

Accepted answer

This is the structure i have used so far and has worked for me

                         DATA RETRIEVING SERVICE
                                    |
                                    |
                  -------------CONTROLLER------------
                  |                 |                |
             TRANSLATOR 1    TRANSLATOR2         TRANSLATOR3
                  |                 |                |
                  |                 |                |
              DIRECTIVE 1     DIRECTIVE 2         DIRECTIVE 3

A SIMPLE DIRECTIVE

this assumes that the data us passed to the data attr of the directive as a json string in the format of

[{value:x,legend:y}]

so in your template just need to do something like

 <div pie-chart data={{Data}}></div>

and your controller should have a Data variable in its scope with the formated data in it.

.directive('pieChart',function(CommService,$compile,$timeout){
return{
    restrict:'A',
    replace:false,
    scope:{
        gdata:'@data'
    },
    template:'<div id="piecontainer_{{$id}}"></div>',
    link:function(scope,element,attrs){

        var data=[];





        /*data=[{value:x,legend:y}]*/
        function Draw(data){
            var i,arr=[];

            for(i=0;i<data.length;i++){
                arr.push(data[i].legend);
            }

            var color = d3.scale.ordinal().domain(arr)
                .range(scope.colors||["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
            element.children().remove();

            var width = $(element).width();
            var height =$(element).height()||width;

            var radius = Math.min(width, height) / 2;
            var arc = d3.svg.arc()
                .outerRadius(radius - 10)
                .innerRadius(10);

            var pie = d3.layout.pie()
                .sort(null)
                .value(function(d){return d.value;});

            var node=element[0];

            var svg = d3.select(node).append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g")
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

            var g = svg.selectAll(".arc")
                .data(pie(data))
                .enter().append("g")
                .attr("class", "arc ");


            var path=g.append("path")
                .attr("d", arc)
               .style("fill", function(d) { return color(d.data.legend); })
                .style("stroke","#3592ac")
                .style("stroke-width","5px")
                .style("position","absolute");
        }



        scope.$watch('data', function (value) {
            Draw(value);
     });

    }
};
})

score:3

I followed this tutorial to put my d3 charts inside a directive: http://www.ng-newsletter.com/posts/d3-on-angular.html

After your chart is in a directive you can treat it like any other angular directive and easily reuse it with different inputs parameters.


Related Query

More Query from same tag