自定义D3.js甜甜圈图
nikunj2512
我想使用d3.js像上面那样创建一个甜甜圈，但是我做不到。我可以使用d3.js制作普通的甜甜圈。
请任何人对如何使用d3.js制作甜甜圈有任何想法吗？
西里尔·切里安（Cyril Cherian）
既然您确认了会有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);
}
})
这里的工作代码
希望这可以帮助！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
CSS3简单的甜甜圈图
- 2
在dimple.js中自定义甜甜圈图的工具提示
- 3
Telerik甜甜圈图-自定义标签
- 4
d3饼图和甜甜圈图
- 5
AMCharts甜甜圈图颜色渐变自定义
- 6
D3.js为带有内圈的甜甜圈图赋予图例
- 7
D3.js-从JSON创建多环甜甜圈图数据集
- 8
如何使用c3.js自定义甜甜圈厚度？
- 9
如何实现D3甜甜圈图？
- 10
c3.js甜甜圈图onclick函数
- 11
用于拆分框架甜甜圈图的D3.js数据结构
- 12
D3.JS和Vue如何创建基本的甜甜圈图
- 13
Vue D3JS创建交互式甜甜圈图
- 14
D3中的甜甜圈图
- 15
D3js-将数据绑定到多个甜甜圈图
- 16
d3甜甜圈图不渲染
- 17
d3饼图和甜甜圈图
- 18
半径变化的d3甜甜圈图
- 19
D3.js：将文字放置在甜甜圈图的圆弧上
- 20
使用动态数据c3.js创建一个甜甜圈图
- 21
D3.js将图例赋予带内圈的甜甜圈图
- 22
d3.js甜甜圈图::渲染其他路径，但未更新
- 23
自定义D3.js甜甜圈图
- 24
响应式甜甜圈图d3
- 25
修改d3.js甜甜圈图以从json数组读取
- 26
d3.js甜甜圈图，外面有甜甜圈图例
- 27
d3js简单的甜甜圈图未绘制路径
- 28
d3.js 甜甜圈饼图动画
- 29
使用 nvd3.js 自定义甜甜圈图
我来说两句