Блог

Я создал диаграмму пончиков, используя d3.js . теперь я хочу повернуть или перевернуть текст в нижней половине. Я проверил ссылку ниже и применил изменения, но она не работает. пожалуйста, помогите.

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

Я поместил свой код ниже.

 <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 = "x09x20u00A0 ";
        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;
        });