CODEWITHSUNDEEP
javascriptd3.js
nikunj2512
nikunj2512

Reputation: 621

Custom D3.js donut chart

Donut

I want to create a donut like above using d3.js but i am unable to make one. I am able to make a normal donut using d3.js.

Please anyone have any idea on how to make this donut using d3.js?

Upvotes: 2

Views: 663

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Since you confirmed there will be 4 set of data

So 4 arcs with different inner and outer radius.

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 will be in this format.

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
}]

Choose the path arc as per the label:

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);
    }
})

Working code here

Hope this helps!

Upvotes: 1

Related Questions