用“零”数据破解d3饼图

Question

I want to display a d3 pie chart that will be visible even if there is no data yet (similarly to this quesiton: Is it possible to start a D3JS pie chart with all values being 0? ) - for example, a pie chart showing the total number of asked versus answered questions on a user's profile - when the user has just signed up, you'd still expect to see the pie chart (perhaps greyed out in a single colour).

The solution I want to implement is to check during creation of the pie chart whether the data, which has 2 rows (one for the correct count and one for the incorrect count) consists only of zeros, and if so I'd simply change one of those numbers to 1 in order to draw the chart and then intervene later to ensure there's no text saying something like "1 correct".

So my question is whether anyone can see a reasonable way to change the following code during pie chart creation to change one of the pie chart values from 0 to 1 only if BOTH rows are 0...

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

I've experimented with numerous solutions looping through the data (eg using the .each() function) to get a sum total of all values of d.someCount, but they so far haven't had the desired effect and so I suspect I'm not visualising the problem correctly.

--EDIT--

Example as requested - try changing both values (top row in Javascript) to zero and the chart disappears (understandably based on the feedback on the other SO post I linked to)...

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

Answer 1

You could add an additional placeholder category, "empty" , whose count is set dynamically based on the other two categories. And you could give it its own color to distinguish it from the other two. Does that accomplish your goal?

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"
}