D3.js 如何显示"；“饼图不可用”；饼图中所有数据均为0时的消息？

所以我在d3中制作了这个饼图，它看起来很好用。但我需要在数据集具有所有0值时显示一条消息。 我尝试对所有数据集值求和，如果值为0，则在文本消息中附加一个div。我不能把它弄对。 有更好的方法吗？需要洞察力

angular.module（'myApp'，[]）。
指令（'barsChart'，函数（）{
var directiveDefinitionObject={
限制：'E'，
替换：false，
作用域：{data:'=chartData'}，
链接：函数（范围、元素、属性）{
风险值数据=[
{标签：“类别1”，值：0}，
{标签：“类别2”，值：0}，
{标签：“类别3”，值：0}
];
var colorRange=d3.scale.category20（）；
var color=d3.scale.ordinal（）
.range（colorRange.range（））；
var宽度=150；
var高度=150；
变量半径=数学最小值（高度、宽度）/2；
var labelr=半径+10；
var pie=d3.layout.pie（）
.sort（空）
.价值（功能（d）{
返回d值；
});
var arc=d3.svg.arc（）
.外层（宽度/2*0.9）
.内半径（0）；
var outerArc=d3.svg.arc（）
.内半径（0）
.外层（数学最小值（宽度、高度）/2*0.9）；
变量legendRectSize=（半径*0.05）；
变量legendSpacing=半径*0.02；
var svg=d3.select（元素[0]）.append（'svg'）
.attr（{width:width，height:height}）
.append（'g'）；
var div=d3.select（“body”）.append（“div”）.attr（“class”，“toolTip”）；
data.forEach（函数（d）{
如果（d.value==未定义| | d.value==NaN）{
d、 数值=0；
}
});
attr（'transform'，'translate（'+200+'，'+height/2+'））；
svg.append（“g”）
.attr（“类”、“切片”）；
svg.append（“g”）
.attr（“类别”、“标签名”）；
svg.append（“g”）
.attr（“类”、“标签值”）；
svg.append（“g”）
.attr（“类别”、“行”）；
var slice=svg.select（“.slices”）.selectAll（“path.slice”）
.data（pie（data），函数（d）{
返回d.data.label}）；
slice.enter（）
.插入（“路径”）
.style（“fill”，函数（d）{返回颜色（d.data.label）；}）
.attr（“类”、“切片”）；
片
.transition（）.持续时间（1000）
.attrTween（“d”，函数（d）{
这个。|电流=这个。|电流| d；
var interpolate=d3.interpolate（该电流，d）；
该值为._电流=插值（0）；
返回函数（t）{
返回弧（插值（t））；
};
})
片
.on（“mousemove”，函数（d）{
div.style（“左”，d3.event.pageX+10+“px”）；
div.style（“顶部”，d3.event.pageY-25+“px”）；
div.style（“显示”、“内联块”）；
div.html（（d.data.label）+“
”+（d.data.value）+“%”）；
});
片
.开启（“鼠标出”，功能（d）{
分区样式（“显示”、“无”）；
});
slice.exit（）
.remove（）；
var legend=svg.selectAll（“.legend”）
.data（color.domain（））
.输入（）
.append（'g'）
.attr（'类'，'图例'）
.attr（'transform'，函数（d，i）{
变量高度=legendRectSize+legendSpacing；
var offset=height*color.domain（）.length/2；
var horz=-3*legendRectSize；
var vert=i*高度-偏移量；
返回“translate（'+horz/2+'，'+90+）”；
});
/*图例.append（'rect'）
.attr（'width'，legendRectSize）
.attr（'height'，legendRectSize）
.style（'填充'，颜色）
.风格（“笔画”、颜色）；
图例.append（'text'）
.attr（'x'，legendRectSize+legendSpacing）
.attr（'y'，legendRectSize-legendSpacing）
.text（函数（d）{return d；}）；
-------文本标签-------*/
var text=svg.select（“.labelName”）.selectAll（“text”）
.数据（pie（数据））；
text.enter（）
.append（“文本”）
.attr（“dy”，“.35em”）
.文本（功能（d）{
返回值（d.value+“%”）；
});
函数midAngle（d）{
返回d.startAngle+（d.endAngle-d.startAngle）/2；
}
文本
.transition（）.持续时间（1000）
.attrTween（“转换”，函数（d）{
这个。|电流=这个。|电流| d；
var interpolate=d3.interpolate（该电流，d）；
该值为._电流=插值（0）；
返回函数（t）{
var d2=插值（t）；
var pos=外表面质心（d2），
x=位置[0]，
y=位置[1]，
h=数学sqrt（x*x+y*y）；
返回“translate（“+（x/h*labelr）+'，”+
（y/h*标签+”；
};
})
.styleTween（“文本锚定”，函数（d）{
这个。|电流=这个。|电流| d；
var interpolate=d3.interpolate（该电流，d）；
该值为._电流=插值（0）；
返回函数（t）{
var d2=插值（t）；
返回（d2.endAngle+d2.startAngle）/2>Math.PI？
“结束”：“开始”；
};
})
.文本（功能（d）{
返回值（d.value+“%”）；
});
text.exit（）
.remove（）；
} 
};
返回directiveDefinitionObject；
});

要简单地显示文本，请创建一个变量来显示文本：

var message = svg.append("text");

并检查值之和是否为零：

if (!d3.sum(data, d => d.value)) {
    message.text("Pie Chart unavailable")
}

如果要创建

而不是SVG文本元素，请更改用于附加div的文本变量（SVG上的任何位置但是，不能将div附加到SVG），并保留

If

语句

---

这是您更新的代码笔：

我可以为这个消息元素设置颜色和位置属性吗？…我知道了…我只需要附加属性，它的工作方式与任何其他附加元素相同！谢谢=>symbol是什么？这是一个函数。当数据的所有值均为0时；控制台抛出错误。我是否可以禁用饼图，而不是让0通过并破坏我的函数？还是将消息附加到svg？

if (!d3.sum(data, d => d.value)) {
    message.text("Pie Chart unavailable")
}