Ajouter des points de suspension pour le débordement de texte en SVG?

Je suis en utilisant D3.js. J'aimerais trouver une SVG équivalent à celui de cette classe CSS, ce qui ajoute des points de suspension si le texte coule de sa div contenant:

.ai-ellipsis {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -moz-binding: url(<q>assets/xml/ellipsis.xml#ellipsis</q>);
}

C'est mon SVG: 

<g class="bar" transform="translate(0,39)">
    <text class="label" x="-3" y="6.5" dy=".35em" text-anchor="start">Construction</text>    
    <rect height="13" width="123"></rect>
</g>

C'est générée comme suit: 

barEnter.append("text").attr("class", "label")
        .attr("x", -3).attr("y", function() { return y.rangeBand() / 2})
        .attr("dy", ".35em").attr("text-anchor", "start")
        .text(function(d) {
            return d.Name;
        });

Actuellement, le texte déborde et se chevauchent les rect élément.

Est-il possible que je peux dire, "si le texte est plus qu'une certaine largeur, de la recadrer et ajouter des points de suspension"?

  • Une fois que vous avez mis en place votre solution, en termes d'amélioration de l'UX, vous pouvez envisager de fournir une alternative à montrer la valeur d'origine, dans le cas où le texte tronqué n'est évidemment pas facile de les comprendre ou de les distinguer des autres textes tronqués. par exemple, utiliser les info-bulles
InformationsquelleAutor Richard | 2013-04-12
  1. 13

    Je ne suis pas au courant d'un équivalent de la classe CSS pour le SVG, mais vous pouvez utiliser foreignObject pour intégrer le code HTML dans le SVG. Cela vous donne accès à cette fonctionnalité et est plus souple en général (par exemple, vous pouvez le faire automatique de coupure de ligne facilement).

    Voir ici pour un exemple complet.

    InformationsquelleAutor Lars Kotthoff
  2. 60

    une fonction wrapper pour le débordement de texte:

        function wrap() {
        var self = d3.select(this),
            textLength = self.node().getComputedTextLength(),
            text = self.text();
        while (textLength > (width - 2 * padding) && text.length > 0) {
            text = text.slice(0, -1);
            self.text(text + '...');
            textLength = self.node().getComputedTextLength();
        }
    }

    utilisation:

    text.append('tspan').text(function(d) { return d.name; }).each(wrap);
    • Excellente solution, mon seul nit-choix de la largeur et de remplissage ne sont pas définies dans la section sur les variables.
    • ce pourrait être résolu par avoir wrap() de retour d'une fonction comme: function wrap(width, padding) { return function() { /* original function */ } }. L'utilisation serait text.append('tspan').text(function(d) { return d.name; }).each(wrap(100, 5));
    • si la vitesse n'est requise binaire de recherche pourrait être utilisée pour déterminer la bonne longueur de texte ...
    • Grande réponse. J'avais l'ajuster en utilisant unicode elipsis caractère au lieu de 3 points. Utiliser &hellip; en HTML,ou \u2026 en JS
    • doit être accepté de répondre à la question indique d3 est disponible et assumably préféré.
    InformationsquelleAutor user2846569
  3. 3

    J'ai implémenté une fonction native qui ne dépend pas de d3, cette fonction implémente 3 chemin de base:

    function textEllipsis(el, text, width) {
  if (typeof el.getSubStringLength !== "undefined") {
    el.textContent = text;
    var len = text.length;
    while (el.getSubStringLength(0, len--) > width) {}
    el.textContent = text.slice(0, len) + "...";
  } else if (typeof el.getComputedTextLength !== "undefined") {
    while (el.getComputedTextLength() > width) {
      text = text.slice(0,-1);
      el.textContent = text + "...";
    }
  } else {
    //the last fallback
    while (el.getBBox().width > width) {
      text = text.slice(0,-1);
      //we need to update the textContent to update the boundary width
      el.textContent = text + "...";
    }
  }
}
    InformationsquelleAutor c9s
  4. 2
    function trimText(text, threshold) {
    if (text.length <= threshold) return text;
    return text.substr(0, threshold).concat("...");
}

    Utiliser cette fonction pour définir le format SVG nœud de texte. La valeur de seuil (par exemple. 20) dépend de vous. Cela signifie que vous allez afficher jusqu'à 20 caractères à partir de votre nœud de texte. Tous les textes de la râpe de 20 caractères sera de garniture et d'affichage "..." à la fin de la garniture de texte.

    D'utilisation par exemple. :

    var self = this;
nodeText.text(x => self.trimText(x.name, 20)) //nodeText is the text element of the SVG node
    InformationsquelleAutor C. Draghici
  5. 0

    Juste une mise à jour sur l'habillage de la fonction proposée par user2846569. getComputedTextLength() a tendance à être très lente, donc...

    MODIFIER

    Je diligence appliqué les conseils par user2846569 et fait une version avec "binaire" de la recherche, avec un calibrage et paramétrés de précision.

    'use strict';
var width = 2560;
d3.select('svg').attr('width', width);
//From http://stackoverflow.com/questions/10726909/random-alpha-numeric-string-in-javascript
function randomString(length, chars) {
var result = '';
for (var i = length; i > 0; --i)
result += chars[Math.floor(Math.random() * chars.length)];
return result;
}
function wrap() {
var self = d3.select(this),
textWidth = self.node().getComputedTextLength(),    //Width of text in pixel.
initialText = self.text(),                          //Initial text.
textLength = initialText.length,                    //Length of text in characters.
text = initialText,
precision = 10, //textWidth /width,                //Adjustable precision.
maxIterations = 100; //width;                      //Set iterations limit.
while (maxIterations > 0 && text.length > 0 && Math.abs(width - textWidth) > precision) {
text = /*text.slice(0,-1); =*/(textWidth >= width) ? text.slice(0, -textLength * 0.15) : initialText.slice(0, textLength * 1.15);
self.text(text + '...');
textWidth = self.node().getComputedTextLength();
textLength = text.length;
maxIterations--;
}
console.log(width - textWidth);
}
var g = d3.select('g');
g.append('text').append('tspan').text(function(d) {
return randomString(width, 'a');
}).each(wrap);

    Vue sur JSFiddle.

    • Pour les points de suspension, cela fonctionne en raison de l' (textLength > largeur...) condition. Dans la pratique, les deux algorithmes ne trim suffisamment de lettres pour adapter le contenant. Fourni des lettres sont d'une taille raisonnable (disons, une dizaine de pixels et plus), la précision est ici suffisante pour une très, très important gain de performance.
    • Un exemple ... le texte est "aaaaaaaa" où chaque lettre est 10px ... ignorer rembourrage ... ce qui nous donne textLength 80 px ... permet de prendre conteneur largeur 40px ... on va se répéter 8 fois supprimant toutes les 8 lettres de texte et résultant en textLength 72 qui seront encore de plus de 40 ...
    InformationsquelleAutor Mauro Colella