다른거 받아와서 쓰는데 이것저것 검색중..
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]
'Programming > d3' 카테고리의 다른 글
| d3 관련 검색.. (0) | 2018.10.12 |
|---|---|
| d3 multi level pie 그래프 (0) | 2018.10.11 |
| d3 font color / weight (0) | 2018.10.02 |
| d3 tooltop (0) | 2018.10.01 |
| d3 graph (0) | 2018.09.27 |
