2
A
回答
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
希望這有助於!
相關問題
- 1. 如何文本添加到D3 JS圓環圖
- 2. 條形圖頂部的圓圈d3.js
- 3. d3.js系列圓形圖表
- 4. 圓環圖與刻度標記線(D3)
- 5. 防止d3圓環圖自動排序
- 6. D3圓環圖上賽季固定標籤
- 7. 餅圖d3.js
- 8. D3.js圖表
- 9. D3.js中的圓形圖像樹形圖
- 10. 將元素放在圓圈d3.js
- 11. d3.js創建文本圓弧
- 12. 將文字置於圓圈內。 d3.js
- 13. 泛d3.js繪製
- 14. 是否可以使用D3在圓環圖的圓弧中插入圖標?
- 15. D3.js圍繞一個圓圈繪製矩形
- 16. 繪製三點之間的d3.js中的橢圓弧
- 17. 使用基於d3.js的製圖庫
- 18. d3.js甘特圖
- 19. d3.js條形圖
- 20. 多線圖D3.js
- 21. d3.js覆蓋圖
- 22. D3.js條形圖
- 23. d3.js在d3.geo.path中添加一個圓圈
- 24. 在D3.js/GeoJSON/TopoJSON/Shapefile中平滑圓弧/繪圖點
- 25. d3.js - 多個折線圖不會更新圓圈
- 26. 如何將圓形添加到折線圖路徑d3.js
- 27. D3.js - 帶圓角的堆積條形圖
- 28. D3.js中的圓圈只顯示無圓圈的文字
- 29. D3.js折線圖 - 定位點
- 30. d3.js熱圖圖例
誰告訴你製作該圖表不是正常的甜甜圈圖表 – ozil
我有要求製作一個這樣的圖表,而不是一個正常的圖表。 – nikunj2512
在這裏有4個分區,或者可以有更多? – Cyril