lables round a circle

<html>
<head>
	<title>Labels on a circle</title>
	<script src="https://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>

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js