D3 arc - not visible

Question

I'm trying to implement a multi level pie chart

My initial code is here : JSFIDDLE

var departments = [
{
    "name": "Sales",
    "color": "green",
    "count": 5
}, 
{
    "name": "Tech Lead",
    "color": "red",
    "count": 8
}, 
{
    "name": "HR",
    "color": "orange",
    "count": 3
}, 
{
    "name": "Development",
    "color": "blue",
    "count": 12
}, 
{
    "name": "QA",
    "color": "pink",
    "count": 6
}, 
{
    "name": "Finance",
    "color": "purple",
    "count": 9
}, 
{
    "name": "PL",
    "color": "gray",
    "count": 1
}, 
{
    "name": "Marketing",
    "color": "yellow",
    "count": 4
}
];

var innerRadius = 50;
var outerRadius = 200;
var maxLeaveCount = departments.reduce(function(max, department) {
    return (max < department.count) ? department.count : max;
}, 0);

var svgContainer = d3.select("#container").append("svg")
.attr("width", 3 * outerRadius)
.attr("height", 3 * outerRadius);


var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(function(d) {
    (d.count / maxLeaveCount) * (outerRadius / 0.9)
})
.startAngle(function(d, i) {
    return (2 * Math.PI * i) / departments.length;
})
.endAngle(function(d, i) {
    return (2 * Math.PI * i) / departments.length + (2 * Math.PI) / departments.length;
})

svgContainer
.selectAll("path")
.data(departments)
.enter()
.append("svg:path")
.attr("d", arc)
.attr("transform", "translate(" + (3 * outerRadius) / 2 + "," + (3 * outerRadius) / 2 + ")")
.style("fill", function(d) {
    return d.color;
})

But it renders nothing. Can someone with experience help me to get this rendered?

Answer 1

You're missing a return statement in your outerRadius function

.outerRadius(function(d) {
  return (d.count / maxLeaveCount) * (outerRadius / 0.9)
})