D3 JS颠倒路径文本 [英] D3 JS upside down path text

问题描述

在这种情况下，是否可以显示文字没有上下颠倒？

Is it possible to show the text not upside down in this case?

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")
    ;

推荐答案

一个很好的例子是使用D3.js在Arcs上放置文本 Nadieh Bremer。一个包含许多图片的长篇博客，其中包含以下内容：

A great example is Placing Texts on Arcs with D3.js by Nadieh Bremer. A lengthy blog with many images from which the following is an extract:

你可能已经觉得它完成了那个样子。但我发现那些标签沿着底部一半，倒立，相当难以阅读。如果这些标签被翻转，我喜欢它，所以我可以从左到右再读一次。

You could already feel like it’s finished with that look. But I find those labels along the bottom half, that are upside down, rather hard to read. I’d prefer it if those labels were flipped, so I can read them from left to right again.

为了做到这一点，我们需要切换开始和结束坐标的当前弧线路径沿着底半部，因此它们从左到右绘制。此外，扫描标志必须设置为0，以获得以逆时针方式从左到右运行的弧

To accomplish this, we need to switch the start and end coordinates of the current arc paths along the bottom half so they are drawn from left to right. Furthermore, the sweep-flag has to be set to 0 to get the arc that runs in a counterclockwise fashion from left to right

因此，对于最终的动作，让我们添加一个几个更多的代码行到.each（）语句

So for the final act, let’s add a few more lines of code to the .each() statement

//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和字符串的结束之间（由regex中的$表示）给出。

The only thing that has changed since the previous section is the addition of the if statement. To flip the start and end positions, we can use a few more regular expressions. The current starting x and y location is given by everything in between the capital M and the capital A. The current radius is denoted by everything in between the capital A and the 0 0 1 of the x-axis rotation, large-arc flag and sweep flag. Finally the end location is given by all in between the 0 0 1 and the end of the string (denoted by a $ in regex).

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

So we save all the pieces in different variables and build/replace up the newArc using the final line in the if statement which has switched the start and end position.

textPath部分需要一个小的改变。对于下半弧，dy属性不应将标记放在圆弧路径上方，但要降低圆弧路径下方的标签。因此，我们需要一个小的if语句，将导致两个不同的dy值。
（为了能够在if语句中使用d.endAngle，我在.data（）步骤中使用pie（donutData）替换了donutData。你仍然可以使用d.data来引用数据本身，而不是d。它可以在代码的.text（）行中看到。）

The textPath section needs a small change. For the bottom half arcs, the dy attribute shouldn’t raise the labels above the arc paths, but lower the labels below the arc paths. So we need a small if statement which will result in two different dy values. (To be able to use the d.endAngle in the if statement I replaced the donutData by pie(donutData) in the .data() step. You can still reference the data itself by using d.data instead of just d, which you can see in the .text() line of code.)

//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;});

这篇关于D3 JS颠倒路径文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！