Angularjs d3.js饼图被截断

我试着将一个有效的饼图代码从一个简单的HTML文件复制到一个angular指令。 使用my指令加载图表有效，但图表被截断

代码有点长，所以我附加了一个

JS代码：

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

var-app=angular.module（'chartApp'，[]）；
app.controller（'SalesController'，['$scope'，函数（$scope）{
$scope.salesData=[
{标签：'aa'，值：54}，
{标签：'bb'，值：26}，
{标签：'cc'，值：20}
];
}]);
应用程序指令（'pieChart'，函数（$window）{
返回{
限制：“EA”，
模板：“”，
链接：函数（范围、元素、属性、ctrl）{
//仅当数据可用时渲染图形
var数据=范围[attr.chartData]；
var w=300，
h=300；
var r=150；
变量d3=$window.d3；
var color=d3.scale.category20（）；//内置颜色范围
var svg=d3.select（element.find（'svg'）[0]）；
svg.data（[data]）
.append（'svg'）//将数据与文档关联
.attr（“width”，w）//设置可视化的宽度和高度（这些将是标记的属性
.attr（“高度”，h）
.append（“svg:g”）
//组成一个小组拿着我们的饼图
.attr（“transform”、“translate”（+r+），“+r+”）；//将饼图的中心从0,0移动到radius，radius
var arc=d3.svg.arc（）//这将使用arc数据为我们创建元素
.外层（r）；
var pie=d3.layout.pie（）//这将在给定值列表的情况下为我们创建弧数据
.value（函数（d）{return d.value；}）；//我们必须告诉它才能访问数据数组中每个元素的值
var arcs=svg.selectAll（“g.slice”）//这将选择具有类slice的所有元素（还没有任何元素）
.data（pie）//关联生成的pie数据（一个弧数组，每个弧都有startAngle、endAngle和value属性）
.enter（）//这将为每个应与选择关联的“额外”数据元素创建元素。结果是为数据数组中的每个对象创建一个
.append（“svg:g”）//创建一个组来保存每个切片（我们将有一个和每个切片关联的元素）
.attr（“类”、“切片”）；//允许我们在切片中设置样式（如文本）
arcs.append（“svg:path”）
.attr（“fill”，function（d，i）{return color（i）；}）//设置要从上面定义的颜色函数中选择的每个切片的颜色
.attr（“d”，arc）；//这将使用关联数据（饼图）和arc绘图功能创建实际的SVG路径
append（“svg:text”）//为每个片段添加一个标签
.attr（“transform”，函数（d）{//将标签的原点设置为弧的中心
//我们必须确保在调用arc.centroid之前设置这些参数
d、 内半径=0；
d、 外层=r；
return“translate（“+arc.centroid（d）+”）；//这会给我们一对坐标，如[50,50]
})
.attr（“文本锚定”、“中间”）
.style（“字体大小”，“20px”）//将文本置于其原点的中心
.text（函数（d，i）{返回数据[i].label；}）；//从原始数据数组中获取标签
}
};
});

HTML:

图表

我试图添加一个填充和空白，如图所示，但问题仍然存在

---

有什么想法吗？

您的代码有几个问题：

不要使用

模板：

，因为稍后会在其中插入另一个svg。只需删除该行，饼图就会插入到当前div中

删除第一个

svg

元素后，将选择器从

var svg=d3.select（element.find（'svg'）[0]）

更改为

var svg=d3.select（element[0]）

最后，您需要链接您的

svg

定义，这样它将指向已经包含已翻译的

g

的对象。现在您定义

svg

。然后将

g

元素附加到它，然后再附加另一个

g.slice

元素，该元素未放置在第一个

g>中

第3点的变化如下：

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

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

下面是一个工作示例

祝你好运

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

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