D3 arc - nicht sichtbar

Question

Ich versuche, ein Multi-Level-Kreisdiagramm ist hier

Mein anfänglichen Code zu implementieren: 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; 
}) 

Aber es macht nichts. Kann jemand mit Erfahrung mir helfen, das gerendert zu bekommen?

Answer 1

Sie verpassen eine return-Anweisung in Ihrer outerRadius Funktion

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