How to edit / complete text alignment along textPath inside an arc using d3.js?

Question

Here's the fiddle: http://jsfiddle.net/DevChefOwen/CZ6Dp/

var text = g.append("text")
            .style("font-size",30)
            .style("fill","#000")
            .attr("dy",0)
            .append("textPath")
            .attr("xlink:href","#yyy")
            .style("text-anchor","left") // using "end", the entire text disappears
            .text("some text");

I tried different things to no avail. Left alignment is the easy part. If you made the middle, you see only “text” instead of “some text”, implying that “some” are simply hidden because it “went out of range” for a given arc.

If, however, I added:

        .attr("startOffset","39%")

(like here: http://jsfiddle.net/DevChefOwen/2H99c/ )

, / / ( ), .

SVG- ( , ), , "text-anchor" "left".

!

Answer 1

. - "text-anchor"="end" "startOffset"="100%".

, , d3, , , , : http://jsfiddle.net/CZ6Dp/8/

, , , ( ), , .

(, "left" "right" text-anchor ).

@defghi1977 , , , .

- ( ), , .

, ( ). @defghi1977 , , . , , DOM, <textPath>. ( , - DOM!)

var path = g.append("svg:path")
    .attr("d", arct)
    .style("fill","#ccc")
    .attr("transform", "translate("+cfg.w/2+","+cfg.h/2+")")
    .each(function(d,i) {
        var justArc = /(^.+?)L/; 
        //grab everything up to the first Line statement
        var thisSelected = d3.select(this);
        var arcD = justArc.exec( thisSelected.attr("d") )[1];
        defs.append("path")
            .attr("id", "yyy") //normally the id would be based on the data or index  
            .attr("d", arcD)
            .attr("transform", thisSelected.attr("transform") );
            //if you can avoid using transforms directly on the path element, 
            //you'll save yourself having to repeat them for the text paths...
    });

var text = g.append("text")
            .style("font-size",30)
            .style("fill","#000")
            .attr("dy",0)
            .append("textPath")
            .attr("xlink:href","#yyy")
            .style("text-anchor","end") 
            .attr("startOffset","100%")
            .text("some text");

http://jsfiddle.net/CZ6Dp/9/

, DOM load @defghi1977, , , getTotalLength. , .

.

Answer 2

4 ( 5) . , , .
, , d3.js, svgdom.
. , , .

• path-anchor .
• , startOffset.

---

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

var text = g.append("text")
        .style("font-size",30)
        .style("fill","#000")
        .attr("dy",0)
        .append("textPath")
        .attr("xlink:href","#yyy")
        //.style("text-anchor","left") // using "end", the entire text disappears
        .attr("text-anchor", "end")
        .text("some text")
        .attr("startOffset",function(){
            var d = document.getElementById("yyy").getAttribute("d");
            var tmp = document.createElementNS("http://www.w3.org/2000/svg" ,"path");
            //get the arc segment of path
            var arc = d.match(/(^.+?)L/)[1];
            tmp.setAttribute("d", arc);
            //return offset position
            return tmp.getTotalLength();
        });

Answer 3

, text-anchor - " , ", " ".

, startOffset . , ( 53%).

, . , .