d3.js pie-chart is truncated

Question

I've tried to copy a working pie-chart code from a simple single HTML file to an angular directive. Loading chart using my directive works but the chart is truncated.

The code is a bit long so I attached a 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 only 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 with the document
                    .attr("width", w)           //set the width and height of our visualization (these will be attributes of the <svg> tag
                    .attr("height", h)
                    .append("svg:g")
                    //make a group to hold our pie chart
                    .attr("transform", "translate(" + r + "," + r + ")");   //move the center of the pie chart from 0, 0 to radius, radius

                var arc = d3.svg.arc()              //this will create <path> elements for us using arc data
                    .outerRadius(r);

                var pie = d3.layout.pie()           //this will create arc data for us given a list of values
                    .value(function(d) { return d.value; });    //we must tell it out to access the value of each element in our data array

                var arcs = svg.selectAll("g.slice")     //this selects all <g> elements with class slice (there aren't any yet)
                    .data(pie)                          //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
                    .enter()                            //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
                    .append("svg:g")                //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
                    .attr("class", "slice");    //allow us to style things in the slices (like text)


                arcs.append("svg:path")
                    .attr("fill", function(d, i) { return color(i); } ) //set the color for each slice to be chosen from the color function defined above
                    .attr("d", arc);                                    //this creates the actual SVG path using the associated data (pie) with the arc drawing function

                arcs.append("svg:text")                                     //add a label to each slice
                    .attr("transform", function(d) {                    //set the label's origin to the center of the arc
                        // we have to make sure to set these before calling arc.centroid
                        d.innerRadius = 0;
                        d.outerRadius = r;
                        return "translate(" + arc.centroid(d) + ")";        //this gives us a pair of coordinates like [50, 50]
                    })
                    .attr("text-anchor", "middle")
                    .style("font-size","20px")//center the text on it's origin
                    .text(function(d, i) { return data[i].label; });        //get the label from 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 to add a padding and margin as shown here but issue is still persist.

Any ideas?

Answer 1

There are several issues with your code:

1. Do not use a template: <svg></svg>, because later on you insert another svg in it. Simple remove that line, so that the pie chart will be inserted in your current div.

2. One you removed the first svg element, change the selector from var svg = d3.select(element.find('svg')[0]) to var svg = d3.select(element[0]).

3. And lastly, you need to chain your svg definition, so that it will point the the object that already has the translated g in it. Now you define the svg. Then you attach to it a g element, and later you attach another g.slice element, that is not placed inside the first g.

Changes at point 3 are as follows:

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

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

Here is a fork of your codepen with a working example.

Good luck!