https://moratelindo.co.id/eng/js/radial-progress/radialProgress.js

1function radialProgress(parent) {
2    var duration = 1000,
3        delay = 0,
4        selection,
5        diameter = 100,
6        label = "",
7        fontSize = 10,
8        progressStyle = 'filled';
9
10
11    var value = 0,
12        minValue = 0,
13        maxValue = 100;
14
15    var currentArc = 0, currentValue = 0;
16
17    var arc = d3.svg.arc()
18        .startAngle(0); //just radians
19
20    var arcBgFill = d3.svg.arc()
21        .startAngle(0)
22        .endAngle(360 * (Math.PI / 180)); //just radians
23
24    var arcBg = d3.svg.arc()
25        .startAngle(0)
26        .endAngle(360 * (Math.PI / 180)); //just radians
27
28
29    selection = d3.select(parent);
30
31
32    function component() {
33
34        selection.each(function (data) {
35
36            // Select the svg element, if it exists.
37            var svg = d3.select(this).selectAll("svg").data([data]);
38
39            var enter = svg.enter().append("svg").attr("class", "radial-svg").append("g");
40
41            measure();
42
43            svg.attr("width", diameter)
44                .attr("height", diameter);
45
46
47            var background = enter.append("g").attr("class", "component")
48                .attr("cursor", "pointer");
49
50            arc.endAngle(0);
51
52            if (progressStyle === 'filled') {
53                background.append("path")
54                    .attr("transform", "translate(" + width / 2 + "," + width / 2 + ")")
55                    .attr("d", arcBgFill);
56            }
57            if (progressStyle === 'notFilled') {
58                background.append("path")
59                    .attr("transform", "translate(" + width / 2 + "," + width / 2 + ")")
60                    .attr("d", arcBg).attr("class", "bg-first-layer");
61            }
62
63
64            enter.append("g").attr("class", "arcs");
65            var path = svg.select(".arcs").selectAll(".arc").data(data);
66            path.enter().append("path")
67                .attr("class", "arc")
68                .attr("transform", "translate(" + width / 2 + "," + width / 2 + ")")
69                .attr("d", arc);
70
71            enter.append("g").attr("class", "labels");
72            if (progressStyle === 'filled') {
73                var label = svg.select(".labels").selectAll(".label").data(data);
74                label.enter().append("text")
75                    .attr("class", "label")
76                    .attr("y", width / 2 + fontSize / 3)
77                    .attr("x", width / 2)
78                    .attr("cursor", "pointer")
79                    .attr("width", width)
80                    .attr('fill', '#fff')
81                    .text(function () {
82                        return minValue + "%";
83                    })
84                    .style("font-size", fontSize + "px");
85            }
86
87            layout();
88
89            function layout() {
90
91                var ratio = (value - minValue) / (maxValue - minValue);
92                var endAngle = Math.min(360 * ratio, 360);
93                endAngle = endAngle * Math.PI / 180;
94
95                path.datum(endAngle);
96                path.transition().duration(duration).delay(delay)
97                    .attrTween("d", arcTween);
98                if (progressStyle === 'filled') {
99                    label.datum(Math.round(ratio * 100));
100                    label.transition().duration(duration).delay(delay)
101                        .tween("text", labelTween);
102                }
103
104            }
105
106        });
107    }
108
109    function labelTween(a) {
110        var i = d3.interpolate(currentValue, a);
111        currentValue = i(0);
112
113        return function (t) {
114            currentValue = i(t);
115            this.textContent = Math.round(i(t)) + "%";
116        }
117    }
118
119    function arcTween(a) {
120        var i = d3.interpolate(currentArc, a);
121        return function (t) {
122            currentArc = i(t);
123            return arc.endAngle(i(t))();
124        };
125    }
126
127
128    function measure() {
129        height = width = diameter;
130        fontSize = width * .144;
131        arc.outerRadius(width / 2 * .85);
132        arc.innerRadius(width / 2 * .76);
133        arcBgFill.outerRadius(width / 2);
134        arcBgFill.innerRadius(0);
135        arcBg.outerRadius(width / 2 * .85);
136        arcBg.innerRadius(width / 2 * .76);
137    }
138
139
140    component.render = function () {
141        measure();
142        component();
143        return component;
144    };
145
146    component.value = function (data) {
147        if (!data) {
148            data = 0;
149        }
150        value = [data];
151        selection.datum([value]);
152        return component;
153    };
154
155
156    component.diameter = function (data) {
157        if (!data) {
158            return component;
159        }
160        diameter = data;
161        return component;
162    };
163
164
165    component.delay = function (data) {
166        if (!data) {
167            return component;
168        }

169        delay = data;
170        return component;
171    };
172
173    component.duration = function (data) {
174        if (!data) {
175            return component;
176        }
177        duration = data;
178        return component;
179    };
180    component.progressStyle = function (data) {
181        if (!data) {
182            return component;
183        }
184        progressStyle = data;
185        return component;
186    };
187
188    return component;
189
190}
191