如何使用d3.js水平翻转画布左侧的文本？

Question

以下是我的文字代码。 我只需要水平翻转“示例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>