Comment à droite/à la fin d'aligner le texte le long d'un textPath à l'intérieur d'un arc à l'aide de d3.js?

Voici le violon: 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");

J'ai essayé un certain nombre de choses différentes en vain. La aligné à gauche est la partie facile. Si vous avez un moyen, cependant, vous ne voyez que "texte" au lieu de "texte", ce qui implique que "certains" est juste caché, car il s'est "hors de portée" pour l'arc.

Si, toutefois, j'ai ajouté:

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

(comme ici: http://jsfiddle.net/DevChefOwen/2H99c/)

Il serait aligné à droite, mais à l'extérieur de par programme en essayant d'obtenir la largeur/hauteur de l'élément de texte et de regarder les fortes variations de la largeur/hauteur (ce qui semble mauvais et susceptible d'erreurs), je n'arrive pas à trouver un moyen de les aligner à droite le texte.

J'ai aussi essayé d'utiliser un chemin SVG (essentiellement d'une courbe d'arc de la ligne) et le même acte de disparition qui se passe avec le texte "texte d'ancre" est réglé à "gauche".

Merci d'avance pour votre temps!

OriginalL'auteur DevChefOwen | 2014-03-06

d3.js svg

9

La question est un peu confuse questions. Le problème n'est pas l'alignement du texte à la fin du cheminement, qui est facile à faire avec "text-anchor"="end" et "startOffset"="100%".

Cependant, l'utilisation de ces paramètres avec le chemin d'accès par la d3 la fonction arc, vous vous retrouvez avec le texte de virage autour de la fin de l'intérieur de la courbe et de la gauche de la straight edge, à la fin de la trajectoire définie par la fonction arc:
http://jsfiddle.net/CZ6Dp/8/

Le vrai problème est que le chemin que vous voulez que le texte soit aligné le long de (l'arc extérieur de la forme) n'est qu'un segment de la trajectoire qui définit la forme.

(En passant, la "gauche" et "droite" ne sont pas des valeurs valides pour le "texte d'ancre" de la propriété, et sera simplement ignorée).

La réponse par @defghi1977 donne une manière d'aborder le problème, de déterminer la longueur du segment de tracé que vous voulez utiliser et ajuster le décalage de départ en conséquence.

Une autre façon d'aborder le problème est de créer un chemin séparé (non dessiné à l'écran) ce qui ne représente que la partie du chemin d'accès que vous souhaitez être utilisé pour le positionnement du texte.

Il y a un certain nombre de façons possibles pour créer un chemin d'accès qui ne représente que l'arc extérieur (un exemple de code ici). @defghi1977 de l'approche de la saisir dans le chemin d'accès existant avec des expressions régulières est probablement la plus efficace pour votre situation. Mais au lieu de simplement la création d'un temporaire élément pour calculer une longueur, en fait, j'ai ajouter le nouveau chemin d'accès au DOM sorte qu'il peut être utilisé comme chemin de référence pour la <textPath> élément. (Qui, je suppose est l'inconvénient de cette approche, dont deux fois autant d'éléments 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/

Encore une fois, l'affacturage dans le DOM load @defghi1977 de la méthode est probablement légèrement préférable, bien que cette version a l'avantage de ne pas être tributaire de prise en charge du navigateur pour getTotalLength. Mais pour autant que je sais que la méthode est assez bien mis en œuvre.

Donc, il suffit de considérer ce une autre approche, à des fins d'exhaustivité.

Merci pour l'explication plus approfondie et l'autre approche. Je suis d'accord que @defghi1977 l'approche est légèrement préférable: étant donné que la vôtre parle à sa/son et est plus complet, la vôtre est la réponse choisie.

OriginalL'auteur AmeliaBR

Ce chemin est construit par 4(ou 5) des segments de tracé.

Donc, ce probrem sera résolu à obtenir le premier arc de longueur de chemin d'accès.

Mais je ne sais pas comment l'obtenir sous longueur de chemin d'accès en utilisant d3.js je me suis donc utiliser svgdom directement.

J'ai essayé de corriger votre code. Si ce code n'est pas ce que vous espérez, je suis désolé.

chemin-attribut de point d'ancrage à la fin.
définir la fonction pour obtenir startOffset valeur.

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

Si vous utilisez node.js avec jsdom, il va se casser depuis getTotalLength() n'a pas encore été mise en œuvre.

OriginalL'auteur defghi1977

1

Je pense que la confusion vient de la signification de text-anchor - ce n'est pas "par rapport à l'endroit où le parent vais-je justifier" mais plutôt "quelle partie de moi, dois-je aligner le début".

Vous avez raison d'essayer d'utiliser startOffset pour déplacer l'origine. Depuis le rayon extérieur de votre chemin est plus long que le rayon intérieur, le bon décalage de départ est un peu plus que la moitié du chemin (environ 53%).

Juste un peu plus de tourner avec vos paramètres et vous devriez l'avoir. Voici un violon avec mon interprétation de ce que vous cherchez.

J'entends ce que tu veux dire, mais, malheureusement, se tourner ne sera pas vraiment tout à fait car je vais être en alignant le texte de différentes longueurs à différentes arc angles. Si vous étiez intéressé, @defghi1977 a une solution mathématiquement en déduit la position qui doit être réglé de façon à différentes longueurs de texte sera encore le rendement que l'alignement à droite. Merci pour vos points de pourtant si.

OriginalL'auteur couchand

Vous devez vous connecter pour publier un commentaire.