使用“零”数据破解d3饼图

时间:2017-03-01 18:12:35

标签: javascript d3.js

我想显示一个d3饼图,即使还没有数据也会显示(类似于这个问题:Is it possible to start a D3JS pie chart with all values being 0?) - 例如,一个饼图显示已询问和回答问题的总数在用户的个人资料中 - 当用户刚刚注册时,您仍然希望看到饼图(可能是单色的灰色)。

我想要实现的解决方案是在创建饼图期间检查具有2行(一个用于正确计数,一个用于错误计数)的数据是否仅包含零,如果是,我会只需将其中一个数字更改为1即可绘制图表,然后再进行干预,以确保没有文字说“1正确”。

所以我的问题是,是否有人能够在饼图创建过程中看到一种合理的方法来更改以下代码,只有当BOTH行为0时才将饼图值中的一个从0更改为1 ...

var pie = d3.layout.pie().sort(null).value(function(d) { return d.someCount; });

我已经尝试了循环数据的众多解决方案(例如使用.each()函数)来获得d.someCount的所有值的总和,但是到目前为止它们还没有达到预期的效果,所以我怀疑我没有正确地看到这个问题。

- 编辑 -

请求示例 - 尝试将两个值(Javascript中的顶行)更改为零,图表消失(可以理解地根据我链接到的其他SO帖子的反馈)...

http://codepen.io/d3wannabe/pen/oZbWEv

1 个答案:

答案 0 :(得分:2)

您可以添加其他占位符类别"empty",其计数根据其他两个类别动态设置。你可以给它自己的颜色来区别于其他两种颜色。这会实现你的目标吗?

var pieChartData = [ { "type": "asked", "theCount": "0" }
                   , { "type": "answered", "theCount": "0" }
                   , { "type": "empty", "theCount": "0"}];

if(pieChartData[0].theCount === "0" &&
  pieChartData[1].theCount === "0"){
  pieChartData[2].theCount = "1"
} else {
  pieChartData[2].theCount = "0"
}