Arc generator (centroid)

Arc generator (centroid).

forked from d3indepth's block: Arc generator (centroid)

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Arc generator (centroid)</title>
</head>

var arcData = [
	{label: 'A', startAngle: 0, endAngle: 0.2},
	{label: 'B', startAngle: 0.2, endAngle: 0.6},
	{label: 'C', startAngle: 0.6, endAngle: 1.4},
	{label: 'D', startAngle: 1.4, endAngle: 3},
	{label: 'E', startAngle: 3, endAngle: 2* Math.PI}
];

// Create a path element and set its d attribute
d3.select('g')
	.selectAll('path')
	.data(arcData)
	.enter()
	.append('path')
	.attr('d', arcGenerator);

// Add labels, using .centroid() to position
d3.select('g')
	.selectAll('text')
	.data(arcData)
	.enter()
	.append('text')
	.each(function(d) {
		var centroid = arcGenerator.centroid(d);
		d3.select(this)
			.attr('x', centroid[0])
			.attr('y', centroid[1])
			.attr('dy', '0.33em')
			.text(d.label);
	});
  </script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js