Javascript 当d3图表不返回任何数据时，是否可以添加svg图像？

对于下面的plunkr，我有一个饼图，它有3个饼楔。如果没有数据，饼图将消失并显示自定义字符串“0事件”。这是在图表配置的noData属性中完成的：

 noData: '0 incidents'

我的问题不是显示一个字符串，而是如何插入一个空的饼图作为没有如下所示数据的指示器

var-app=angular.module（'plunker'，['nvd3']）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.options={
图表：{
键入：“pieChart”，
身高：500，
函数（d）{返回d.key；}，
y：函数（d）{返回d.y；}，
noData:“0个事件”，
颜色：[“CE1B1F”、“FFC455”、“00A6CD”]，
显示标签：错误，
持续时间：500，
标签阈值：0.01，
标签布局：正确，
图例：{
保证金：{
前五名，
右：35，
底部：5，
左：0
}
},
工具提示：{
内容生成器：函数（e）{
var系列=e.系列[0]；
if（series.value==null）返回；
变量头=
"" + 
"" +
"" +
“”+series.key+“”+
"" + 
"";
变量行=
"" +
“+series.key+”-#3:“+”+
“”+e.data.MyAttribute1+“”+
"" +
"" +
“+series.key+”——#5:“+”+
“”+e.data.MyAttribute2+“”+
"";
返回“”+
标题+
"" + 
行+
"" +
"";
} 
}                
}
};
$scope.data=[
{
钥匙：“第一类”，
y:2，
MyAttribute1:“DLA Avn…第一类”，
MyAttribute2:“DLA能源…第一类”
},
{
钥匙：“第二类”，
y:1,，
MyAttribute1:“DLA Avn…第二类”，
MyAttribute2:“DLA能源…第二类”
},
{
钥匙：“第三类”，
y:3，
MyAttribute1:“DLA Avn…第三类”，
MyAttribute2:“DLA能源…第三类”
},
];
});

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
  $scope.options = {
        chart: {
            type: 'pieChart',
            height: 500,
            x: function(d){return d.key;},
            y: function(d){return d.y;},
            noData: '0 incidents',
            color:['#CE1B1F', '#FFC455', '#00A6CD'],
            showLabels: false,
            duration: 500,
            labelThreshold: 0.01,
            labelSunbeamLayout: true,
            legend: {
                margin: {
                    top: 5,
                    right: 35,
                    bottom: 5,
                    left: 0
                }
            },
            tooltip: {
            contentGenerator: function (e) {
              var series = e.series[0];
              if (series.value === null) return;

              var header = 
                "<thead>" + 
                  "<tr>" +
                    "<td class='legend-color-guide'><div style='background-color: " + series.color + ";'></div></td>" +
                    "<td class='key'><strong>" + series.key + "</strong></td>" +
                  "</tr>" + 
                "</thead>";

              var rows = 
                "<tr>" +
                  "<td class='key'>" + series.key + '- #3: ' + "</td>" +
                  "<td class='x-value'>" + e.data.MyAttribute1 + "</td>" + 
                "</tr>" +
                "<tr>" +
                  "<td class='key'>" + series.key + '- #5: ' + "</td>" +
                  "<td class='x-value'>" + e.data.MyAttribute2 + "</td>" + 
                "</tr>";

              return "<table>" +
                  header +
                  "<tbody>" + 
                    rows + 
                  "</tbody>" +
                "</table>";
            } 
          }                

        }
    };

    $scope.data = [
        {
            key: "CAT I",
            y: 2,
            MyAttribute1:"DLA Avn ... CAT I",
            MyAttribute2:"DLA Energy ... CAT I"
        },
        {
            key: "CAT II",
            y: 1,
            MyAttribute1:"DLA Avn ... CAT II",
            MyAttribute2:"DLA Energy ... CAT II"
        },
        {
            key: "CAT III",
            y: 3,
            MyAttribute1:"DLA Avn ... CAT III",
            MyAttribute2:"DLA Energy ... CAT III"
        },
    ];
});