d3 를 이용하여 도넛 그래프 그리기

다른거 받아와서 쓰는데 이것저것 검색중..

function donut_instance(w, h, element_id) {

var dataset = [

{ name: 'IE', percent: 39.10 },

{ name: 'Chrome', percent: 32.51 },

{ name: 'Safari', percent: 13.68 },

{ name: 'Firefox', percent: 8.71 },

{ name: 'Others', percent: 6.01 }

];

var pie = d3.layout.pie()

.value(function (d) { return d.percent })

.sort(null)

.padAngle(.03);

//var w = 300, h = 300;

var outerRadius = (w * 0.60) / 2;

var innerRadius = (w * 0.30) / 2;;

var color = d3.scale.category20c();

var arc = d3.svg.arc()

.outerRadius(outerRadius)

.innerRadius(innerRadius);

var svg = d3.select(element_id)

.append("svg")

.attr({

width: w,

height: h,

class: 'shadow'

}).append('g')

.attr({

transform: 'translate(' + (w / 2) + ',' + (h / 2 + 2) + ')'

});

var path = svg.selectAll('path')

.data(pie(dataset))

.enter();

path.append('path')

.transition()

.duration(1000)

.attr({

d: arc,

fill: function (d, i) {

return color(d.data.name);

}

})

.attrTween('d', function(d) {

var i = d3.interpolate(d.startAngle+0.1, d.endAngle);

return function(t) {

d.endAngle = i(t);

return arc(d)

}

})

;

svg.append("circle")

.attr("cx", 0)

.attr("cy", 0)

.attr("r", 5)

.attr("fill", "black")

.transition()

.duration(1000)

.attr("r", 25)

.attr("fill", "#3182bd");

svg.append("text")

.attr("x",-5)

.attr("y",5)

.text('5');

}

[링크 : https://blog.nacyot.com/articles/2015-02-02-d3-selection/]

[링크 : https://bl.ocks.org/rshaker/225c6df494811f46f6ea53eba63da817]

[링크 : https://www.tutorialspoint.com/d3js/d3js_transition.htm]

[링크 : https://www.tutorialspoint.com/d3js/d3js_animation.htm]

[링크 : http://bl.ocks.org/nadinesk/99393098950665c471e035ac517c2224]