chiufin/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pie Chart with outer labels</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>

    <style>
        body{
            background:#333;
        }

        #donut{
            position:relative;
            width:900px;
            height:500px;
            background:#333;
        }

        #donut line{
            stroke: #666;
            stroke-width: 1
        }

        #donut path.label_line{
            stroke: #aaa;
            stroke-width: 2;
            fill:none;
            stroke-linejoin:round;
            /*stroke-linecap:butt;*/

        }

        #donut text{
            fill: #fff;
            alignment-baseline:central;
        }

        #donut text.center_text{
            fill:#D9CD90;
            font-size:50px;
            text-anchor: middle;
            alignment-baseline:central;
        }

        #donut circle{
            r: 5;
            fill: #333;
        }

        .progress{
            position:absolute;
            top:50%;
            left:50%;
            width:30px;
            height:30px;
        }

    </style>
</head>

<body>
    <div id="donut"></div>
    <script>
(function(d3) {
        'use strict';
        var dataset = [
            {label:'Apple', count:5000},
            {label:'Banana', count:4800},
            {label:'Chocolate', count:3800},
            {label:'Donut', count:1200},
            {label:'Egg', count:800},
        ];


        var width = 900;
        var height = 500;


        var scale = d3.scale.linear()
                .range([0,180]);


        var chartSVG = d3.select('#donut')
                .append('svg').attr({
                    'width': width,
                    'height': height
                })
                .append('g')
                .attr({
                    'transform':'translate('+ width/2 + ',' + height/2 + ')'
                });

        var chartCenterInfo = chartSVG.append('text')
                .attr({
                    'class':'center_text',
                    'transform':'translate(0,0)'
                });

        var arc = d3.svg.arc()
                .innerRadius(90)
                .outerRadius(140)
                .cornerRadius(1)
                .padAngle(.02);

        var arcHover = d3.svg.arc()
                .innerRadius(90)
                .outerRadius(150)
                .cornerRadius(10)
                .padAngle(.02);

        var lineX = function(d){ return arc.centroid(d)[0]};
        var lineY = function(d){ return arc.centroid(d)[1]};
        var ratio = 1.3;
        var offset = 40;


        var pie = d3.layout.pie()
                .value(function(d){ return d.count;})
                .sort(null);


        var color = d3.scale.linear()
                .range(['#D9CD90','#FFB11B']);


                    var maxValue = d3.sum(dataset, function(d){return d.count});
                    scale.domain([0, maxValue]);
                    color.domain([1,dataset.length-1]);
                    chartCenterInfo.text('Chart');
                    var chartGroup = chartSVG.selectAll('path')
                        .data(pie(dataset))
                        .enter()
                        .append('g')
                        .on('mouseover', function(){
                                var _this = d3.select(this);
                                _this.select('.arc_path')
                                        .transition()
                                        .duration(300)
                                        .ease('plastic')
                                        .attr({
                                            'd':arcHover
                                        })
                                        .style({'opacity':'.8'});
                                _this.select('.label_line')
                                        .style({
                                            'stroke':'#fff'
                                        });

                                chartCenterInfo
                                        .transition()
                                        .duration(300)
                                        .ease('plastic')
                                        .text(_this[0][0].__data__.data.count);
                            })
                            .on('mouseout', function(){
                                var _this = d3.select(this);

                                _this.select('.arc_path')
                                        .interrupt()
                                        .transition()
                                        .duration(300)
                                        .ease('plastic').attr({
                                            'd':arc
                                        })
                                        .style({'opacity':'1'});
                                _this.select('.label_line')
                                        .style({
                                            'stroke':'#aaa'
                                        });
                                chartCenterInfo
                                        .interrupt()
                                        .transition()
                                        .duration(300)
                                        .ease('plastic')
                                        .text("Chart");
                            });

                    chartGroup.append('path')
                            .attr({
                                'class':'arc_path',
                                'd': arc,
                                'id':function(d,i){return 'pie_' + i},
                                'fill':function(d,i){
                                    return color(i);}
                            });

                    chartGroup.append('text')
                            .attr({
                                'text-anchor': function(d){
                                    return lineX(d)<0 ? 'end':'start'
                                },
                                'transform': function(d){
                                    var x = lineX(d)<0 ? lineX(d)*ratio - (offset+5) : lineX(d)*ratio + (offset+5);
                                    return 'translate('+ x + ',' + lineY(d)*ratio +')'
                                }
                            })
                            .text(function(d){  return d.data.label });


                    //label
                    chartGroup.append('path')
                                .attr({
                                'class':'label_line',
                                'd': function(d){
                                    var x = lineX(d)<0 ? lineX(d)*ratio - offset : lineX(d)*ratio + offset;

                                        return 'M'+lineX(d)+' '+ lineY(d) +
                                                'Q' + lineX(d)*ratio + ' ' + lineY(d)*ratio + ' '+ x + ' ' + lineY(d)*ratio;
                                }
                            });


                    chartGroup.append('circle')
                            .attr({
                                'transform': function(d){  return 'translate('+ lineX(d) + ',' + lineY(d) +')'}
                            });


})(window.d3);

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Pie Chart with outer labels</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>

	<style>
	body{
	background:#333;
	}

	#donut{
	position:relative;
	width:900px;
	height:500px;
	background:#333;
	}

	#donut line{
	stroke: #666;
	stroke-width: 1
	}

	#donut path.label_line{
	stroke: #aaa;
	stroke-width: 2;
	fill:none;
	stroke-linejoin:round;
	/stroke-linecap:butt;/

	}

	#donut text{
	fill: #fff;
	alignment-baseline:central;
	}

	#donut text.center_text{
	fill:#D9CD90;
	font-size:50px;
	text-anchor: middle;
	alignment-baseline:central;
	}

	#donut circle{
	r: 5;
	fill: #333;
	}

	.progress{
	position:absolute;
	top:50%;
	left:50%;
	width:30px;
	height:30px;
	}

	</style>
	</head>

	<body>
	<div id="donut"></div>
	<script>
	(function(d3) {
	'use strict';
	var dataset = [
	{label:'Apple', count:5000},
	{label:'Banana', count:4800},
	{label:'Chocolate', count:3800},
	{label:'Donut', count:1200},
	{label:'Egg', count:800},
	];



	var width = 900;
	var height = 500;


	var scale = d3.scale.linear()
	.range([0,180]);


	var chartSVG = d3.select('#donut')
	.append('svg').attr({
	'width': width,
	'height': height
	})
	.append('g')
	.attr({
	'transform':'translate('+ width/2 + ',' + height/2 + ')'
	});

	var chartCenterInfo = chartSVG.append('text')
	.attr({
	'class':'center_text',
	'transform':'translate(0,0)'
	});

	var arc = d3.svg.arc()
	.innerRadius(90)
	.outerRadius(140)
	.cornerRadius(1)
	.padAngle(.02);

	var arcHover = d3.svg.arc()
	.innerRadius(90)
	.outerRadius(150)
	.cornerRadius(10)
	.padAngle(.02);

	var lineX = function(d){ return arc.centroid(d)[0]};
	var lineY = function(d){ return arc.centroid(d)[1]};
	var ratio = 1.3;
	var offset = 40;



	var pie = d3.layout.pie()
	.value(function(d){ return d.count;})
	.sort(null);


	var color = d3.scale.linear()
	.range(['#D9CD90','#FFB11B']);



	var maxValue = d3.sum(dataset, function(d){return d.count});
	scale.domain([0, maxValue]);
	color.domain([1,dataset.length-1]);
	chartCenterInfo.text('Chart');
	var chartGroup = chartSVG.selectAll('path')
	.data(pie(dataset))
	.enter()
	.append('g')
	.on('mouseover', function(){
	var _this = d3.select(this);
	_this.select('.arc_path')
	.transition()
	.duration(300)
	.ease('plastic')
	.attr({
	'd':arcHover
	})
	.style({'opacity':'.8'});
	_this.select('.label_line')
	.style({
	'stroke':'#fff'
	});

	chartCenterInfo
	.transition()
	.duration(300)
	.ease('plastic')
	.text(_this[0][0].__data__.data.count);
	})
	.on('mouseout', function(){
	var _this = d3.select(this);

	_this.select('.arc_path')
	.interrupt()
	.transition()
	.duration(300)
	.ease('plastic').attr({
	'd':arc
	})
	.style({'opacity':'1'});
	_this.select('.label_line')
	.style({
	'stroke':'#aaa'
	});
	chartCenterInfo
	.interrupt()
	.transition()
	.duration(300)
	.ease('plastic')
	.text("Chart");
	});

	chartGroup.append('path')
	.attr({
	'class':'arc_path',
	'd': arc,
	'id':function(d,i){return 'pie_' + i},
	'fill':function(d,i){
	return color(i);}
	});

	chartGroup.append('text')
	.attr({
	'text-anchor': function(d){
	return lineX(d)<0 ? 'end':'start'
	},
	'transform': function(d){
	var x = lineX(d)<0 ? lineX(d)ratio - (offset+5) : lineX(d)ratio + (offset+5);
	return 'translate('+ x + ',' + lineY(d)*ratio +')'
	}
	})
	.text(function(d){ return d.data.label });


	//label
	chartGroup.append('path')
	.attr({
	'class':'label_line',
	'd': function(d){
	var x = lineX(d)<0 ? lineX(d)ratio - offset : lineX(d)ratio + offset;

	return 'M'+lineX(d)+' '+ lineY(d) +
	'Q' + lineX(d)ratio + ' ' + lineY(d)ratio + ' '+ x + ' ' + lineY(d)*ratio;
	}
	});


	chartGroup.append('circle')
	.attr({
	'transform': function(d){ return 'translate('+ lineX(d) + ',' + lineY(d) +')'}
	});







	})(window.d3);

	</script>
	</body>
	</html>