Je veux déplacer le texte sur la moitié inférieure dans le tableau de donut en utilisant d3 js

J'ai fait un tableau de donut en utilisant d3.js. Maintenant, je veux faire pivoter ou déplacer le texte sur la moitié inférieure. J'ai vérifié ci-dessous le lien et j'ai appliqué les changements, mais ça ne fonctionne pas. Aidez-vous.

Http://www.visualcinnamon.com/2015/09/placing-text-on-arcs.html

J'ai mis mon code ci-dessous.

<div id="chart"></div> <script type="text/javascript"> var screenWidth = window.innerWidth;

// var couleur = d3.scale.category20c ();

  var margin = { left: 25, top: 25, right: 25, bottom: 25 }, width = Math.min(screenWidth, 600) - margin.left - margin.right, height = Math.min(screenWidth, 600) - margin.top - margin.bottom; //The start date number and end date number of the months in a year var month_space = "\x09\x20\u00A0 "; var monthData = [{ month: "T"+month_space+"E"+month_space+"X"+month_space+"T" }, { month: "T"+month_space+"E"+month_space+"X"+month_space+"T"+month_space+"1" } ]; var svg = d3.select("#chart").append("svg") .attr("width", (width + margin.left + margin.right)) .attr("height", (height + margin.top + margin.bottom)) .attr("class", "wrappersvg") .append("g").attr("class", "wrapper") .attr("transform", "translate(" + (width / 2 + margin.left) + "," + (height / 2 + margin.top) + ")"); //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 + 50) .startAngle(function(d) { return d.startAngle + Math.PI/2; }) .endAngle(function(d) { return d.endAngle + Math.PI/2; }); //Creates function that will turn the month data into start and end angles var pie = d3.layout.pie() .value(function(d) { return 180; }) .padAngle(.01) .sort(null); //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) .each(function(d,i) { //Search pattern for everything between the start and the first capital L var firstArcSection = /(^.+?)L/; //Grab everything up to the first Line statement var newArc = firstArcSection.exec( d3.select(this).attr("d") )[1]; //Replace all the commas so that IE can handle it newArc = newArc.replace(/,/g , " "); //If the end angle lies beyond a quarter of a circle (90 degrees or pi/2) //flip the end and start position if (d.endAngle > 90 * Math.PI/180) { var startLoc = /M(.*?)A/, //Everything between the capital M and first capital A middleLoc = /A(.*?)0 0 1/, //Everything between the capital A and 0 0 1 endLoc = /0 0 1 (.*?)$/; //Everything between the 0 0 1 and the end of the string (denoted by $) //Flip the direction of the arc by switching the start and end point (and sweep flag) var newStart = endLoc.exec( newArc )[1]; var newEnd = startLoc.exec( newArc )[1]; var middleSec = middleLoc.exec( newArc )[1]; //Build up the new arc notation, set the sweep-flag to 0 newArc = "M" + newStart + "A" + middleSec + "0 0 0 " + newEnd; }//if //Create a new invisible arc that the text can flow along svg.append("path") .attr("class", "hiddenDonutArcs") .attr("id", "monthArc_"+i) .attr("d", newArc) .style("fill", "none"); }); //Append the month names within the arcs svg.selectAll(".monthText") .data(monthData) .enter().append("text") .attr("class", "monthText") .attr("x", 0) //Move the text from the start angle of the arc //.attr("dy", 36) //Move the text down .attr("dy", function(d,i) { return (d.endAngle > 90 * Math.PI/180 ? 18 : 36); }) .append("textPath") .attr("text-anchor", "middle") .attr("startOffset",function(d,i){return "26%";}) .attr("xlink:href", function(d, i) { return "#monthArc_" + i; }) .text(function(d) { return d.month; });