Javascript D3.js：现场旋转文本

我有一个饼图，里面有38个项目。半径相当大，因此文本向内。我唯一的问题是文本颠倒了。我试着用一个普通的旋转来修复这个问题，但这不起作用，因为它绕着整个图形的中心旋转。我寻找答案，发现smth与之相似。我试图用它来达到我自己的目的，但失败了

我还检查了一个，据我所知：它们在这里旋转，然后把它放在原来的位置

我的文本做了很多事情，但几乎不是我想要的。在当前状态下，它在我的图表中间堆叠所有东西。 这是我的密码：

var margin = { left:80, right:100, top:50, bottom:100 },
    height = 1200 - margin.top - margin.bottom, 
    width = 1280 - margin.left - margin.right,
    cwidth = 50;

var svg = d3.select("#pie-chart svg")
    .append("g")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("transform", "translate(" + 525 + "," + 450 + ")")
    .append("g")

/*gives the same numeric value to every object in the datafile (cuz they dont have numeric values) */     
var pie = d3.pie()
    .value(function(d){return 1})
;

//load data
d3.json("./data/unidata.json").then(function(data){
    //console.log(data);  
    var arc = d3.arc();

    var gs = svg.selectAll("g")
                .data(d3.values(data))
                .enter()
                .append("g")
                .attr("transform", "translate(" + margin.left + ", " + margin.top + ")")
    ;

    var arcIndexDictionary = {};
    var arcRingIndexSizeDictionary = {};


    // Visible arc
    gs.selectAll("path")
        .data(function(d,i) {       
            return pie(d).map(function(e){e.ringIndex = i; return e});
        })
        .enter()
        .append("path")
        .attr("class", "nameArc")
        .attr("id", function(d,i) { 
            return d.data.name + "nameArc_"+i+i; 
        })
        .attr("d", 
            function(d, i) {
                var innerRadius = cwidth * d.ringIndex;
                var outerRadius = cwidth * (d.ringIndex + 1);
                var outerRadiusSlim = cwidth * (d.ringIndex + 1) + 2 * cwidth;
                // stores how many items are there in a ring in order to decide which text to flip
                arcRingIndexSizeDictionary[d.ringIndex] = i;
                // Main Arc - draws the rings
                if (d.ringIndex == 0){
                    arcIndexDictionary[d.data.name + "nameArc_"+i] = (innerRadius + outerRadius) / 2.0;
                    return arc.innerRadius(innerRadius).outerRadius(outerRadius)(d);
                }
                else if (d.ringIndex == 1){
                    arcIndexDictionary[d.data.name + "nameArc_"+i] = (innerRadius + outerRadiusSlim) / 2.04; 
                    return arc.innerRadius(innerRadius).outerRadius(outerRadiusSlim)(d);
                }
            }
        )
        .attr("fill", "grey") 
    ;

    // Placing text
    gs.selectAll(".nameText")
        .data(function(d,i) {       
            return pie(d).map(function(e){e.ringIndex = i; return e});
        })
        .enter()
        .append("text")
            .attr("class", "nameText")  
            .attr('dy', function(d, i, array){
            var ringItemCount = arcRingIndexSizeDictionary[d.ringIndex];
        }) 
        .append("textPath")
            .attr("xlink:href",function(d, i, array){
                return "#" + d.data.name + "nameArc_"+i+i;   
            })        
        .style("text-anchor", function(d, i){
                var ringItemCount = arcRingIndexSizeDictionary[d.ringIndex];    
                if(d.ringIndex == 1 && i <= ringItemCount/2) {
                    return "start"; //HERE
                } else {
                    return "start"
                }           
                })
        .attr("startOffset", function(d, i){ 
            if(d.ringIndex == 1 && i <= ringItemCount/2) 
                return "50%"; 
                if(d.ringIndex == 1) return "12%";   
                var ringItemCount = arcRingIndexSizeDictionary[d.ringIndex];
            }) 
        .text(function(d, i, array){ 
            if (d.ringIndex > 0)
            {return d.data.name};
            })
            .style('font-family', 'arial')
            .attr('font-size', function(d){
                if(d.ringIndex > 1){return '13px'} else {
                    return '9px';
                }})
    ;


    // ROTATE
    d3.selectAll("text")
    // https://stackoverflow.com/questions/26049488/how-to-get-absolute-coordinates-of-object-inside-a-g-group
    .attr("transform", function(d, i){
        if(d != undefined)
        {
            var ringItemCount = arcRingIndexSizeDictionary[d.ringIndex];          
            var rightPieCount = ringItemCount / 2;
            var halfPoint = rightPieCount / 2;  
            if(d.ringIndex == 1 && i <= ringItemCount/2)
            {
                // if you add 1 to x you need to add 180 / 19 * i
                var locationData = this.getBBox();
                var centerX = locationData.x + (locationData.width / 2);
                var centerY = locationData.y + (locationData.height / 2);
                // Fix their centralized locations 
                /*  
                if (locationData.y < 0){
                    centerX = centerX + i * 7;
                    centerY = centerY - (halfPoint - i) * 6;   
                } else {
                    centerX = centerX + (rightPieCount - i) * 7;
                    centerY = centerY - (-(halfPoint - i) * 6);
                } */
                console.log(centerX, centerY);
                var result = "";
                result += 'translate(' + centerX + ',' + centerY + ')';
                result += 'rotate(180)';
                return result;
            }
        }
    })
    ;

    // middle text
    gs.append("text")
        .attr("text-anchor", "middle")
        .attr('font-size', '0.8em')
        .attr('font-family', 'arial')
        .style('fill', 'white')
        .text("Inf FB") 

})

---

若要围绕其中心旋转某物，您需要将其中心移动到0，0，然后旋转它，然后将其向后移动。因此，在添加变换的位置，请执行以下操作：

// ROTATE
d3.selectAll("text")
  .attr("transform", function(d, i) {
    if (d !== undefined) {
        var ringItemCount = arcRingIndexSizeDictionary[d.ringIndex];
        if (d.ringIndex == 1 && i <= ringItemCount / 2) {
            var locationData = this.getBBox();
            var centerX = locationData.x + (locationData.width / 2);
            var centerY = locationData.y + (locationData.height / 2);

            var result = 'translate(' + centerX + ',' + centerY + ')';
            result += 'rotate(180)';
            result += 'translate(' + (-centerX) + ',' + (-centerY) + ')';
            return result;
        }
    }
});

// ROTATE
d3.selectAll("text")
  .attr("transform", function(d, i) {
    if (d !== undefined) {
        var ringItemCount = arcRingIndexSizeDictionary[d.ringIndex];
        if (d.ringIndex == 1 && i <= ringItemCount / 2) {
            var locationData = this.getBBox();
            var centerX = locationData.x + (locationData.width / 2);
            var centerY = locationData.y + (locationData.height / 2);

            var result = 'translate(' + centerX + ',' + centerY + ')';
            result += 'rotate(180)';
            result += 'translate(' + (-centerX) + ',' + (-centerY) + ')';
            return result;
        }
    }
});