Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- function drawDonutChart(element, percent, width, height,c1, c2,name)
- {
- var duration = 2000;
- var color = d3.scale.ordinal()
- .range([c1,c2]);
- var dataset = {
- lower: calcPercent(0),
- upper: calcPercent(percent)
- },
- radius = Math.min(width, height) / 2,
- pie = d3.layout.pie().sort(null),
- format = d3.format(".0%");
- var arc = d3.svg.arc()
- .innerRadius(radius - radius/4)
- .outerRadius(radius);
- var svg = d3.select(element).append("svg")
- .attr("id",name)
- .attr("width", width+5)
- .attr("height", height+5)
- .append("g")
- .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
- var path = svg.selectAll("path")
- .data(pie(dataset.lower))
- .enter().append("path")
- .attr("fill", function(d,i) { return color(d+i); })
- .attr("d", arc)
- .each(function(d) { this._current = d; }); // store the initial values
- var text = svg.append("text")
- .attr("text-anchor", "middle")
- .attr("dy", ".35em")
- .attr("fill", function(d) { return color(d); })
- .attr("font-size", 40)
- .attr("font-weight",900);
- var progress = 0;
- var timeout = setTimeout(function () {
- clearTimeout(timeout);
- path = path.data(pie(dataset.upper)); // update the data
- path.transition().duration(duration).attrTween("d", function (a) {
- // Store the displayed angles in _current.
- // Then, interpolate from _current to the new angles.
- // During the transition, _current is updated in-place by d3.interpolate.
- var i = d3.interpolate(this._current, a);
- var i2 = d3.interpolate(progress, percent);
- this._current = i(0);
- return function(t) {
- text.text( format(i2(t) / 100) );
- return arc(i(t));
- };
- }); // redraw the arcs
- }, 200);
- }
- function calcPercent(percent) {
- return [percent, 100-percent];
- }
Advertisement
Add Comment
Please, Sign In to add comment