svg - D3.js How to rotate Text on a path -

This is my first D3 project (I'm not a programmer, so learn everything once).

I am trying to create a circular calendar which I have been pulling for several years, which is a major pain.

Most bits are working now, but I can not understand how text gets 90 degrees on this verge.

Once I change the text, I will know how it can be drawn evenly around the circle.

My goal is to look like this hand drawn example:

It looks like currently:

Maybe I have lost a dead end by leaving the text, one way, then welcome any and all suggestions.

Edit: I created an JSFDial here

Even I still have the code:

 < Code> & lt ;! DOCTYPE html & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Style & gt; Body {font: 12px aerial;} path {stroke: red; Stroke-width: 1; Fill: None; }. Axis Path, .xx {fill: none; Stroke: Gray; Stroke-width: 1; Shape Rendering: Crisp Edges; } & Lt; / Style & gt; & Lt; Body & gt; & Lt; Script type = "text / javascript" src = "d3 / d3.v3.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" & gt; Var margin = {top: 25, right: 25, bottom: 25, on the left: 25}, width = 950 - margin. Left - margin. Right, height = 950 - margin.txt - margin.bottom; // build number number function pad (n) {returns (n ​​& t; 10)? ("0" + n): n; } Function getDaysArray (year) {var numdaysInMonth, within days, day index, index, i, l, day and night; NumdaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; Day In Wiic = ['S', 'M', 'T', 'W', 'T', 'F', 'S']; Day Index = {'Sun': 0, 'Mon': 1, 'Mangala': 2, 'Mercury': 3, 'Guru': 4, 'Venus': 5, 'Saturn': 6}; Day = []; (M = 0; m; lt; 12; m ++) {index = day index [(new date (year, m, 1)). ToString () Partition ('') [0]]; For (i = 0, l = numDaysInMonth [m]; i & lt; l; i ++) {day and day (pad ((i + 1)) + '+ within days [index ++]); If (index == 7) index = 0; }} Day of return; } Var year = 2014 var days = getDaysArray (year) var svg = d3.select ("body"). Append ("svg") .attr ("width", width + margin.left + margin.right) .attr ("height", height + margin.top + margin.bottom). Append ("G"), PI = Math PI; Var arc = d3.svg.arc (). Witrateredius (850) .terradeus (851) .startangle (0) .endAngle (-pi * 1.99999) var path = svg.append ("path") .attr ("d" ("AD", "path1"). Attr ("conversion", "translation (900 900)") .attr ("fill", "#faf") // draw line function days year (year) {if (year% 4 === 0 & amp; (Year% 100! == 0 year = 400 === 0)) {// leap year return 366;} Else {// a jump year return 365;}} var dt = new date (year + " / 01/01 "); Var day = dt.getDay (); Var startrads = (2 * pi / day this year (year)) * day; // --- center point (width, height) --- var cx = Width cy = height var r = 850 // - Radius - var radial lines = 52 // --- 52 lines --- var angle angle = 2 * Math.PI / radial lines // --- between each line --- --- - (Var k = startrads; of & lt; radialLines; k ++) - for - --- --- - "---" {var x2 = r * Math.cos (angle * K) + cx var y2 = R * Math.sin (angle * k) + cy radialPoints.push ([x2, y2]) --- --- Your D3 SVG original element --- svg.selectAll ("line") // - - An empty selection --- Data (radial points). Enter () .andend ("SVG: Line") .attr ("x1", cx) .attr ("y1", cy) Atr ("x2", function (p) {return p [0]}) .attr ("y2", function (p) {return p [1]}) .attr ("stroke", "red"); // Add the label the day. Var text1 = svg.append ("text"); Text1 .selectAll ("body"). Data (day) .enter () .append ("textpass") .attr ("xlink: href", "# path1") .text (function (d) {return d;}); & Lt; / Script & gt; & Lt; / Body & gt;    
 
 
 To get the text, you just need to calculate your position and rotation In the same way that you are calculating the end of the radial lines (like "text") .attr ("transform", function (d, i) {"translation (" + + (850 * math cos (i * 2) * Math / PI / 365) + "," + (850 * Math.Science (i * 2 * Math.PI / 365 + + height) + "Rotate (" + (i * 360/365) + ")";}) .text (function (d) {return d;});   
 Note that the side of the circle that appears in your JSfield, reverse the text Oga You can fix this by adding  value to rotate  180. Revised Jesfild.