tomgp
7/2/2014 - 11:14 AM

lables round a circle

lables round a circle

index.html
content_copyfile_download
<html>
<head>
	<title>Labels on a circle</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css">
		.guide{
			stroke:#aaa;
			fill:none;
			stroke-width:1;
			stroke-dasharray:1,1;
		}

		.dot{
			fill:#333;
			alignment-baseline:middle;
		}
	</style>
</head>
<body>

</body>

<script type="text/javascript">
	
	var size = 300;
	var dotSize = 15;
	var margin = 100;

	function pointsOnCircle(num){
		var angle = (2 * Math.PI)/num;
		var points = [];
		var i=0;
		for(var a = 0; a<(2*Math.PI); a+=angle){
			i++;
			points.push({
				x:Math.cos(a),
				y:Math.sin(a),
				rotation:a,
				label:'point ' + i
			})
		}
		return points;
	}

	var circles = [];

	for(var i=1;i<11;i++){
		circles.push( pointsOnCircle( i ) );
	} 
	console.log	(circles);
	var scale = d3.scale.linear()
		.range([0, size])
		.domain([-1, 1]);

	var pointCircle = function(g){
		g.append('circle')
			.attr({
				r:size/2 - 20, //make the circle smaller than the labels circle
				cx:size/2,
				cy:size/2,
				'class':'guide'
			});

		g.each(function(data,i){
			d3.select(this).selectAll('.dot')
				.data(data)
				.enter()
					.append('text')
					.attr({
						"class":'dot',
						"x":function(d){ return scale(d.x) },
						"y":function(d){ return scale(d.y) },
						"text-anchor":function(d){ 
							if( d.rotation >= Math.PI/2 && d.rotation < (3*Math.PI)/2 ){
								return 'end';
							} 
							return 'start';
						}
					})
					.text("HELLO!");
				});
	}

	d3.select('body')
		.selectAll('svg')
		.data(circles)
		.enter()
		.append('svg')
			.attr('width', size + margin*2)
			.attr('height', size + margin*2)
			.append('g').attr('transform','translate('+margin+','+margin+')')
			.call(pointCircle)




</script>
</html>