svg - D3 JS颠倒路径文本

Question

在这种情况下，是否可以显示文本不颠倒？

http://jsfiddle.net/paulocoelho/Hzsm8/1/

代码:

var cfg = {
    w:400,
    h:400
};

var g = d3.select("#testdiv").append("svg").attr("width", cfg.w).attr("height", cfg.h).append("g")

var arct = d3.svg.arc()
        .innerRadius(cfg.h / 5)
        .outerRadius(cfg.h / 3)
        .startAngle(Math.PI/2)
        .endAngle(Math.PI*1.5);

var path = g.append("svg:path")
    .attr("id","yyy")
    .attr("d", arct)
    .style("fill","blue")
    .attr("transform", "translate("+cfg.w/2+","+cfg.h/6+")");

var text = g.append("text")
            .style("font-size",30)
            .style("fill","#F8F8F8")
            .attr("dy",35)
            .append("textPath")
            .attr("xlink:href","#yyy")
            .attr("startOffset",50)
            .text("some text")
    ;

Answer 1

一个很好的例子是 Placing Texts on Arcs with D3.js纳迪赫·布雷默 (Nadieh Bremer)一个包含许多图像的冗长博客，其中摘录如下:

翻转下半部分的文字

你可能已经觉得它已经完成了。但是我发现下半部分的标签是颠倒的，很难阅读。如果这些标签被翻转，我更喜欢它，这样我就可以再次从左到右阅读它们。

为了实现这一点，我们需要沿着下半部分切换当前圆弧路径的起点和终点坐标，以便从左到右绘制它们。此外，sweep-flag 必须设置为 0 才能获得从左到右以逆时针方式运行的弧

因此，对于最后一幕，让我们在 .each() 语句中再添加几行代码

//Create the new invisible arcs and flip the direction for those labels on the bottom half
.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", "donutArc"+i)
        .attr("d", newArc)
        .style("fill", "none");
});

自上一节以来唯一改变的是添加了 if 语句。为了翻转开始和结束位置，我们可以使用更多的正则表达式。当前起始 x 和 y 位置由大写 M 和大写 A 之间的所有内容给出。当前半径由大写 A 和 x 轴旋转的 0 0 1 之间的所有内容表示，大弧标志和扫旗。最后，结束位置由 0 0 1 和字符串末尾之间的所有内容给出(由正则表达式中的 $ 表示)。

因此，我们将所有部分保存在不同的变量中，并使用 if 语句中切换了开始和结束位置的最后一行来构建/替换 newArc。

textPath 部分需要一个小的改变。对于下半部分弧线，dy 属性不应将标签抬高至弧线路径上方，而应降低弧线路径下方的标签。所以我们需要一个小的 if 语句，它会产生两个不同的 dy 值。
(为了能够在 if 语句中使用 d.endAngle，我在 .data() 步骤中用 pie(donutData) 替换了 donutData。您仍然可以通过使用 d.data 而不是仅使用 d 来引用数据本身，可以在 .text() 代码行中看到。)

//Append the label names on the outside
svg.selectAll(".donutText")
    .data(pie(donutData))
   .enter().append("text")
    .attr("class", "donutText")
    //Move the labels below the arcs for those slices with an end angle greater than 90 degrees
    .attr("dy", function(d,i) { return (d.endAngle > 90 * Math.PI/180 ? 18 : -11); })
   .append("textPath")
    .attr("startOffset","50%")
    .style("text-anchor","middle")
    .attr("xlink:href",function(d,i){return "#donutArc"+i;})
    .text(function(d){return d.data.name;});