Javascript 自定义D3.js甜甜圈图表

我想用d3.js创建一个像上面那样的甜甜圈，但我无法制作一个。我可以使用d3.js制作一个普通的甜甜圈

---

请大家知道如何使用d3.js制作这个甜甜圈吗？

因为您确认将有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);
    }
})

工作代码

---

希望这有帮助

谁让你把那张图做成非正常的油炸圈饼图我有一个要求，就是制作一张像这样的图，而不是一张正常的图。在这张图中有4个分区，或者可能有更多的分区？@Cyril:不，分区的数量是固定的。它将永远是4。非常感谢。这个标签有什么用？不需要删除它。我正试图在它周围贴上文字标签。