angularjs - d3.js pie-chart is truncated -

i've tried copy working pie-chart code simple single html file angular directive. loading chart using directive works chart truncated.

the code bit long attached codepen demonstration

js code:

var app = angular.module('chartapp', []);  app.controller('salescontroller', ['$scope', function($scope){     $scope.salesdata=[         {label: 'aa',value: 54},         {label: 'bb',value: 26},         {label: 'cc',value: 20}     ]; }]);  app.directive('piechart', function ($window) {     return {         restrict: 'ea',         template: "<svg></svg>",         link: function (scope, element, attr, ctrl) {             // render graph when data avaliable                  var data = scope[attr.chartdata];                  var w = 300,                     h = 300 ;                 var r = 150;                  var d3 = $window.d3;                 var color = d3.scale.category20();     //builtin range of colors                 var svg = d3.select(element.find('svg')[0]);                  svg.data([data])                     .append('svg')                 //associate our data document                     .attr("width", w)           //set width , height of our visualization (these attributes of <svg> tag                     .attr("height", h)                     .append("svg:g")                     //make group hold our pie chart                     .attr("transform", "translate(" + r + "," + r + ")");   //move center of pie chart 0, 0 radius, radius                  var arc = d3.svg.arc()              //this create <path> elements using arc data                     .outerradius(r);                  var pie = d3.layout.pie()           //this create arc data given list of values                     .value(function(d) { return d.value; });    //we must tell out access value of each element in our data array                  var arcs = svg.selectall("g.slice")     //this selects <g> elements class slice (there aren't yet)                     .data(pie)                          //associate generated pie data (an array of arcs, each having startangle, endangle , value properties)                     .enter()                            //this create <g> elements every "extra" data element should associated selection. result creating <g> every object in data array                     .append("svg:g")                //create group hold each slice (we have <path> , <text> element associated each slice)                     .attr("class", "slice");    //allow style things in slices (like text)                   arcs.append("svg:path")                     .attr("fill", function(d, i) { return color(i); } ) //set color each slice chosen color function defined above                     .attr("d", arc);                                    //this creates actual svg path using associated data (pie) arc drawing function                  arcs.append("svg:text")                                     //add label each slice                     .attr("transform", function(d) {                    //set label's origin center of arc                         // have make sure set these before calling arc.centroid                         d.innerradius = 0;                         d.outerradius = r;                         return "translate(" + arc.centroid(d) + ")";        //this gives pair of coordinates [50, 50]                     })                     .attr("text-anchor", "middle")                     .style("font-size","20px")//center text on it's origin                     .text(function(d, i) { return data[i].label; });        //get label our original data array                     }     }; }); 

html:

<div ng-app="chartapp" ng-controller="salescontroller">   <h1>chart</h1>   <div pie-chart chart-data="salesdata"></div> </div> 

i've tried add padding , margin shown here issue still persist.

any ideas?

there several issues code:

1. do not use template: <svg></svg>, because later on insert svg in it. simple remove line, pie chart inserted in current div.

2. one removed first svg element, change selector var svg = d3.select(element.find('svg')[0]) var svg = d3.select(element[0]).

3. and lastly, need chain svg definition, point the object has translated g in it. define svg. attach g element, , later attach g.slice element, not placed inside first g.

changes @ point 3 follows:

//  var svg = d3.select(element[0]); svg.data([data]) ...  // var svg = d3.select(element[0])     .data([data])     .append('svg') ... 

here fork of codepen working example.

good luck!