This is an example from my blog on Placing Texts on Arcs with D3.js in which the texts are placed inside D3 created arcs. All without writing the SVG path notations yourself.
Other examples of text along a path from the same blog
This is an example from my blog on Placing Texts on Arcs with D3.js in which the texts are placed inside D3 created arcs. All without writing the SVG path notations yourself.
Other examples of text along a path from the same blog
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
<title>Months on an Arc</title> | |
<!-- D3.js --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> | |
<!-- Month names --> | |
<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'> | |
<style> | |
#chart{ | |
text-align: center; | |
} | |
.monthArc { | |
fill: white; | |
stroke: #AAAAAA; | |
} | |
.monthText { | |
fill: #6B6B6B; | |
font-size: 13px; | |
font-family: 'Courgette', sans-serif; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="chart"></div> | |
<script> | |
//////////////////////////////////////////////////////////// | |
//////////////////////// Set-up //////////////////////////// | |
//////////////////////////////////////////////////////////// | |
var screenWidth = window.innerWidth; | |
var margin = {left: 20, top: 20, right: 20, bottom: 20}, | |
width = Math.min(screenWidth, 500) - margin.left - margin.right, | |
height = Math.min(screenWidth, 500) - margin.top - margin.bottom; | |
var svg = d3.select("#chart").append("svg") | |
.attr("width", (width + margin.left + margin.right)) | |
.attr("height", (height + margin.top + margin.bottom)) | |
.append("g").attr("class", "wrapper") | |
.attr("transform", "translate(" + (width / 2 + margin.left) + "," + (height / 2 + margin.top) + ")"); | |
//////////////////////////////////////////////////////////// | |
//////////////////// Scales & Data ///////////////////////// | |
//////////////////////////////////////////////////////////// | |
//The start date number and end date number of the months in a year | |
var monthData = [ | |
{month: "January", startDateID: 0, endDateID: 30}, | |
{month: "February", startDateID: 31, endDateID: 58}, | |
{month: "March", startDateID: 59, endDateID: 89}, | |
{month: "April", startDateID: 90, endDateID: 119}, | |
{month: "May", startDateID: 120, endDateID: 150}, | |
{month: "June", startDateID: 151, endDateID: 180}, | |
{month: "July", startDateID: 181, endDateID: 211}, | |
{month: "August", startDateID: 212, endDateID: 242}, | |
{month: "September",startDateID: 243, endDateID: 272}, | |
{month: "October", startDateID: 273, endDateID: 303}, | |
{month: "November", startDateID: 306, endDateID: 333}, | |
{month: "December", startDateID: 334, endDateID: 364} | |
]; | |
//Creates a function that makes SVG paths in the shape of arcs with the specified inner and outer radius | |
var arc = d3.svg.arc() | |
.innerRadius(width*0.9/2) | |
.outerRadius(width*0.9/2 + 30); | |
//Creates function that will turn the month data into start and end angles | |
var pie = d3.layout.pie() | |
.value(function(d) { return d.endDateID - d.startDateID; }) | |
.padAngle(.01) | |
.sort(null); | |
//////////////////////////////////////////////////////////// | |
//////////////////// Create the Slices ///////////////////// | |
//////////////////////////////////////////////////////////// | |
//Draw the arcs themselves | |
svg.selectAll(".monthArc") | |
.data(pie(monthData)) | |
.enter().append("path") | |
.attr("class", "monthArc") | |
.attr("id", function(d,i) { return "monthArc_"+i; }) | |
.attr("d", arc); | |
//Append the month names within the arcs | |
svg.selectAll(".monthText") | |
.data(monthData) | |
.enter().append("text") | |
.attr("class", "monthText") | |
.attr("x", 5) //Move the text from the start angle of the arc | |
.attr("dy", 18) //Move the text down | |
.append("textPath") | |
.attr("xlink:href",function(d,i){return "#monthArc_"+i;}) | |
.text(function(d){return d.month;}); | |
</script> | |
</body> | |
</html> |