javascript - 如何使用 d3.js 水平翻转 Canvas 左侧的文本？

Question

下面是我的文本代码。我只需要水平翻转“SAMPLE 1”文本以使其更具可读性。

function computeTextRotation(d) {
    var angle = (d.x + d.dx / 2) * 180 / Math.PI - 90;
    return angle;
}

var texts = svg.selectAll("text")
    .data(partitioned_data)
    .enter().append("text")
    .filter(filter_min_arc_size_text)
    .attr("transform", function(d) {
        return "rotate(" + computeTextRotation(d) + ")";
    })
    .attr("x", function(d) {
        return radius / 3 * d.depth;
    })
    .attr("dx", "0.5em") // margin
    .attr("dy", ".35em") // vertical-align  
    .text(function(d, i) {
        return d.name
    })
    .style("font-size", 11);

Answer 1

这是一个解决方案...

function computeTextRotation(d) {
    var rotation = (d.startAngle + d.endAngle)/2 * 180 / Math.PI - 90;
    return {
        global: rotation,
        correction: rotation > 90 ? 180 : 0
    };
}
//...
    text.attr("transform", function(d) {
            var r = computeTextRotation(d);
            return "rotate(" + r.global + ")" 
              + "translate(" + radius / 3 * d.depth + ",0)" 
              + "rotate(" + -r.correction + ")";
        });

---

这是一个工作示例...

    var crm = (function() {
        var prevData = [];
        return function crm(f) {
            var max = 10000;

            oldPieData = JSON.parse(JSON.stringify(prevData));
            prevData = f([
                {name: 'SMR', value: Math.random() * max},
                {name: 'PSF', value: Math.random() * max},
                {name: 'Insurance', value: Math.random() * max},
                {name: 'Other', value: Math.random() * max}
            ])
        }
    })();

    pieTween = function(d, i) {
        var s0;
        var e0;
        if(oldPieData[i]){
            s0 = oldPieData[i].startAngle;
            e0 = oldPieData[i].endAngle;
        } else if (!(oldPieData[i]) && oldPieData[i-1]) {
            s0 = oldPieData[i-1].endAngle;
            e0 = oldPieData[i-1].endAngle;
        } else if(!(oldPieData[i-1]) && oldPieData.length > 0){
            s0 = oldPieData[oldPieData.length-1].endAngle;
            e0 = oldPieData[oldPieData.length-1].endAngle;
        } else {
            s0 = 0;
            e0 = 0;
        }
        var i = d3.interpolate({startAngle: s0, endAngle: e0}, {startAngle: d.startAngle, endAngle: d.endAngle});
        return function(t) {
            var b = i(t);
            return arc(b);
        };
    };

    var pie = Math.PI * 2;
    var w = 200,
        h = 200;
    var ir = 45;
    var duration = 750;
    var chart = d3.select('.chart')
            .attr('width', w)
            .attr('height',h)
            .append('g')
            .attr('transform', 'translate('+w/2+','+ h/2 + ')'),
        pieChart = d3.layout.pie()
            .value(function(d){ return d.value; })
            .sort(null),
        oldPieData = [],

        groups = chart.append ("g")
            .attr("class", "groups"),
    // group at the center of donut
        center_group = chart.append('g')
            .attr("class", "center_group")
            .append('text')
            .attr({'text-anchor': 'middle', dy: "0.35em"});

    createPieChart = function(data){
        var radius = 95, innerRadius = radius - 70;
        var pieData,
            color = d3.scale.ordinal()
                .range(['#469AB2', '#F0AD4E', '#5CB85C', '#D9534F'])
                .domain(data.map(function(d){return d.name}));

        // displaying total calls at the center
        center_group.text(d3.format(",.1f")(d3.sum(data, function(d){return d.value})));

        arc = d3.svg.arc()
            .innerRadius(innerRadius)
            .outerRadius(radius);

        var arcs = groups.selectAll('path')
            .data((pieData = pieChart(data)), function(d){return d.data.name});
        arcs.enter().append('path')
            .attr('class', 'arc');

        arcs.attr('fill', function(d){ return color(d.data.name)})
            .transition()
            .duration(duration)
            .attrTween("d", pieTween)
            .ease("bounce");

        function computeTextRotation(d) {
            var rotation = (d.startAngle + d.endAngle)/2 * 180 / Math.PI - 90;
            return {
                global: rotation,
                correction: rotation > 90 ? 180 : 0
            };
        }

        var labels = groups.selectAll("text")
            .data(pieData);
        labels.enter().append("text")
            .attr({"text-anchor": "middle"})
            .text(function(d) {
                return d.data.name
            })
            .attr("dy", ".35em") // vertical-align
            .style("font-size", 11);
        labels
            .transition()
            .duration(duration)
            .attr("transform", function(d) {
                var r = computeTextRotation(d);
                return "rotate(" + r.global + ")" + "translate(" + (radius + innerRadius) / 2 + ",0)" + "rotate(" + -r.correction + ")";
            })
            .call(endAll, function(){
                window.requestAnimationFrame(
                    function(){crm(createPieChart)}
                )
            });
        return pieData;
    };

    crm(createPieChart);

body {margin: 1px;}
.chart text {
  /*  fill: white;*/
  font: 10px sans-serif;
}
#pie-chart-div {
  position: relative;
  top: 6em;
}
.chart {
  position: relative;
  /*	top: 2em;*/
  left: 5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://gitcdn.xyz/repo/cool-Blue/d3-lib/master/transitions/end-all/endAll.js"></script>
<svg class="chart"></svg>