Ich habe ein Donut-Diagramm mit d3.js erstellt. Jetzt möchte ich den Text in der unteren Hälfte drehen oder spiegeln. Ich habe den folgenden Link überprüft und die Änderungen übernommen, aber es funktioniert nicht. Bitte helfen Sie.

http: //www.visualcinnamon.com/2015/09/placing-text-on-arcs.htm

Ich habe meinen Code unten angegeben.

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

// var color = 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;
        });