定製D3.js圓環圖

Question

我想創建一個像甜甜圈上面使用d3.js，但我無法作出一個。我可以使用d3.js製作一個普通的甜甜圈。

請任何人有任何想法如何使用d3.js這個甜甜圈？

Answer 1

由於您確認將會有4組數據

因此有4條弧具有不同的內徑和外徑。

var biggestarc = d3.svg.arc() 
    .outerRadius(radius - 80) 
    .innerRadius(radius - 10); 

var bigarc = d3.svg.arc() 
    .outerRadius(radius - 30) 
    .innerRadius(radius - 60); 

var smallarc = d3.svg.arc() 
    .outerRadius(radius - 40) 
    .innerRadius(radius - 50); 

var biggerarc = d3.svg.arc() 
    .outerRadius(radius - 20) 
    .innerRadius(radius - 70); 

數據將採用此格式。

data = [{ 
    "label": "Biggest", 
     "percent": 25 //percent to be shown for Biggest arc 
}, { 
    "label": "Bigger", 
    "percent": 10 //percent to be shown for Bigger arc 
}, { 
    "label": "Big", 
    "percent": 65 //percent to be shown for Big arc 
}, { 
    "label": "Small", 
    "percent": 30 //percent to be shown for Small arc 
}] 

選擇路徑弧按標籤：

g.append("path") 
    .attr("d", function (d) { 
    console.log(d) 
    if (d.data.label == "Biggest") { 
     return biggestarc(d); 

    } else if (d.data.label == "Bigger") { 
     return biggerarc(d); 

    } else if (d.data.label == "Big") { 
     return bigarc(d); 

    } else { 
     console.log("target") 
     return smallarc(d); 
    } 
}) 

工作代碼here

希望這有助於！