angularjs nvd3指令显示半饼图

Question

您好我正在尝试使用angularjs-nvd3-directives创建一个饼图，但我的图表被分为一半，我不明白为什么如果我设置宽度和高度，这里是我的代码：

HTML：

<nvd3-pie-chart
                    data="exampleData"
                    id="exampleId"
                    width="550"
                    height="350"
                    x="xFunction()"
                    y="yFunction()"
                    showlegend="true"
                    tooltips="true"
                    showlabels="true"
                    labeltype="percent"
                    labelthreshold="0.5">
                    <svg width="550" height="350"></svg>
        </nvd3-pie-chart>

的javascript：

$scope.exampleData = [{
            key: "5 Stars",
            y: 25
        }, {
            key: "4 Stars",
            y: 32
        }, {
            key: "3 Stars",
            y: 99
        }, {
            key: "2 Stars",
            y: 120
        }, {
            key: "1 Stars",
            y: 64
        }];

        $scope.xFunction = function () {
            return function (d) {
                return d.key;
            };
        };

        $scope.yFunction = function () {
            return function (d) {
                return d.y;
            };
        };

谢谢你的时间!!!

编辑 - ＆GT;新代码：

              <nvd3-pie-chart
                        data="exampleData"
                        id="exampleId"
                        width="500"
                        x="xFunction()"
                        y="yFunction()"
                        showlegend="true"
                        tooltips="true"
                        showlabels="true"
                        labeltype="percent">
                        <svg  width="1000" height="350"></svg>
             </nvd3-pie-chart>