[英]D3 arc - not visible
I'm trying to implement a multi level pie chart 我正在尝试实现多级饼图
My initial code is here : JSFIDDLE 我的初始代码在这里: 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? 有经验的人可以帮助我进行渲染吗?
You're missing a return statement in your outerRadius
function 您在outerRadius
函数中缺少return语句
.outerRadius(function(d) {
return (d.count / maxLeaveCount) * (outerRadius / 0.9)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.