D3弧 - 不可見 - 優文庫

我想實現一個多層次的餅圖D3弧 - 不可見

我最初的代碼是在這裏：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; 
})

但它呈現什麼。有經驗的人可以幫助我得到這個呈現？

來源

2016-12-01 Sampath Liyanage

你在你的outerRadius功能

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

來源

2016-12-01 19:57:45

哎呀缺少return語句。謝謝保羅。 –

D3弧 - 不可見

回答

相關問題