Comment puis-je inclure des sauts de ligne dans les étiquettes en D3 graphiques?

Je suis en utilisant D3 pour générer un graphique à barres (j'ai adapté le code de cet exemple). Les étiquettes que j'utilise sur le xde l'axe sont un couple de mots de longueur chacune, et de ce fait, toutes les étiquettes de chevauchement j'ai besoin de rompre avec ces étiquettes à travers les lignes. (Ça va être beau si je peut remplacer tous les espaces de chaque étiquette avec des retours à la ligne.)

J'ai d'abord essayé en remplaçant les espaces avec littérale des retours à la ligne (&#xA;) et la mise en xml:space="preserve" sur les étiquettes' <text> éléments. Malheureusement, il s'avère que le SVG ne respecte pas cette propriété. Ensuite, j'ai essayé d'envelopper chaque mot dans un <tspan> que je pourrais plus tard de style. J'ai passé chaque étiquette grâce à cette fonction:

function (text) {
    return '<tspan>' + text.replace(//g, '</tspan><tspan>') + '</tspan>';
}

mais cela met juste littérale <tspan>s dans la sortie. Comment puis-je me les étiquettes de texte dans tspans (ou de faire autre chose), de sorte que mes étiquettes ne se chevauchent pas?

  • Est-ce une double question? stackoverflow.com/questions/4991171/...
  • pas vraiment, OP besoin d'insérer tspan's pas autowrap texte avec foreignObject (ce qui est exagéré, et non pris en charge par IE9 (et 10?).
InformationsquelleAutor bdesham | 2012-11-05
  1. 86

    J'ai fini par utiliser le code suivant pour casser chaque x-des étiquettes de l'axe à travers les lignes:

    var insertLinebreaks = function (d) {
    var el = d3.select(this);
    var words = d.split(' ');
    el.text('');

    for (var i = 0; i < words.length; i++) {
        var tspan = el.append('tspan').text(words[i]);
        if (i > 0)
            tspan.attr('x', 0).attr('dy', '15');
    }
};

svg.selectAll('g.x.axis g text').each(insertLinebreaks);

    Noter que cela suppose que les étiquettes ont déjà été créés. (Si vous suivez la forme canonique de l'histogramme exemple puis les étiquettes ont été mis en place dans juste la façon dont vous avez besoin.) Il n'y a pas de véritables sauts de ligne de la logique actuelle; la fonction convertit chaque espace en un retour à la ligne. Cela correspond à mes fins bien, mais vous devrez peut-être modifier le split() ligne pour être plus intelligent sur la façon dont il partitions les parties de la chaîne en lignes.

    • C'était exactement ce dont j'avais besoin, merci. Pour ceux qui pourraient être dans une situation similaire, je me dois de souligner que d ici est un point de données et pas de la chaîne que vous êtes à la mise en forme, afin .split() (pour moi au moins) ont nécessité une modification de d.description.split("\n");.
    • Assez bien fait.
    • merci beaucoup...sa fonctionne parfaitement.
    • Fonctionne à merveille. Pour les gars qui travaillent sur ce,assurez-vous d'avoir tous les éléments.
    • Une autre amélioration à cet au-delà @DanielQuinn la suggestion de diviser sur des retours à la ligne: utiliser d3.select(this).text() à saisir le réel élément de texte au lieu de la limite de la valeur de données. C'est important pour 2 raisons: tout d'abord, votre axe de valeurs peuvent être des nombres plutôt que des chaînes de caractères (ce code ne fonctionne pas dans ce cas) et la deuxième, mon amélioration permet de personnaliser le texte à être inséré par un tickFormat de la fonction sur l'axe de la génératrice.
    • Pour quelqu'un d'autre qui l'utilise, j'ai trouvé nécessaire de définir la variable de mots pour d.toString().split(' ').
    • Cela a fonctionné pour moi, en utilisant v4. J'ai ajouté une pipe pour le format de la date, car c'est là où je voulais que mon retour à la ligne pour se produire: var dateFormat = d3.timeFormat("%b %e|%H:%M"); ... var el = d3.select(this); var words = el.text().split('|'); el.text('');

    InformationsquelleAutor bdesham
  2. 7

    SVG élément de texte ne prend pas en charge l'habillage du texte, il y a donc deux options:

    • diviser le texte en plusieurs SVG éléments de texte
    • utiliser une superposition HTML div sur le dessus de la SVG

    Voir Mike Bostock de commentaire sur ce ici.

    • merci pour le lien vers le commentaire
    InformationsquelleAutor Ilya Boyandin
  3. 6

    Quelque chose que j'ai trouvé pour être utile, c'est à l'aide d'un foreignObject' tag au lieu de texte ou tspan éléments. Cela permet, pour la simple intégration de HTML, permettant de mots pour casser naturellement. La réserve étant l'ensemble des dimensions de l'objet de répondre à des besoins particuliers:

    var myLabel = svg.append('foreignObject')
    .attr({
        height: 50,
        width: 100, //dimensions determined based on need
        transform: 'translate(0,0)' //put it where you want it...
     })
     .html('<div class"style-me"><p>My label or other text</p></div>');

    Quel que soit les éléments que vous placez à l'intérieur de cet objet peut ensuite être obtenue à l'aide de d3.sélectionner/sélectionner tous de mettre à jour les valeurs de texte dynamique.

    InformationsquelleAutor chrisjordanme
  4. 3

    Ayant regardé autour, j'ai trouvé que Mike Bostock a fourni une solution vous permettant de renvoyer le texte à la ronde.

    http://bl.ocks.org/mbostock/7555321

    Pour l'implémenter dans mon code (je suis en utilisant effondré arborescence). J'ai simplement copié le "wrap" la méthode.

    Ensuite ajouté les éléments suivants

        //Standard code for a node    
    nodeEnter.append("text")
        .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
        .attr("dy", ".35em")
        .text(function(d) { return d.text; })
        //New added line to call the function to wrap after a given width
        .call(wrap, 40);

    Je ne vois pas de raison que cela ne devrait pas travailler pour une force dirigée, bar ou tout autre motif

    Amendement :

    J'ai modifié l'écharpe de la fonction à la suite pour n'importe qui qui lit ceci est à l'aide de collapisible graphique. Le changement de l'attribut "x" détermine la allignment correctement, l'incrémentation de la linenumber a été réalisée sur une ligne distincte que les problèmes ont été relevés dans le code d'origine et "y" a été difficile à zéro sinon des problèmes pourraient survenir dans lequel l'espacement de la ligne a augmenté avec chaque ligne.

    function wrap(text, width) {
    text.each(function() {
        var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        lineHeight = 1.1, //ems
        tspan = text.text(null).append("tspan").attr("x", function(d) { return d.children || d._children ? -10 : 10; }).attr("y", y).attr("dy", dy + "em");     
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(" "));
            var textWidth = tspan.node().getComputedTextLength();
            if (tspan.node().getComputedTextLength() > width) {
                line.pop();
                tspan.text(line.join(" "));
                line = [word];
                ++lineNumber;
                tspan = text.append("tspan").attr("x", function(d) { return d.children || d._children ? -10 : 10; }).attr("y", 0).attr("dy", lineNumber * lineHeight + dy + "em").text(word);
            }
        }
    });
}
    InformationsquelleAutor John Duskin
  5. 0

    Il y a aussi cette réponse de l'habillage de longues étiquettes.

    <!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.title {
font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 80, right: 180, bottom: 80, left: 180},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1, .3);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(8, "%");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("data.tsv", type, function(error, data) {
x.domain(data.map(function(d) { return d.name; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);
svg.append("text")
.attr("class", "title")
.attr("x", x(data[0].name))
.attr("y", -26)
.text("Why Are We Leaving Facebook?");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll(".tick text")
.call(wrap, x.rangeBand());
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.name); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); });
});
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, //ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
}
function type(d) {
d.value = +d.value;
return d;
}
</script>

    et le fichier de données "les données.tsv":

    name    value
Family in feud with Zuckerbergs .17
Committed 671 birthdays to memory   .19
Ex is doing too well    .10
High school friends all dead now    .15
Discovered how to “like” things mentally    .27
Not enough politics .12
    InformationsquelleAutor Nav
  6. -1

    utilisation <tspan>

    et dans sa.d3

    nv.modèles.axe = function() {

    ...

          .select('text')
.attr('dy', '0em')
.attr('y', -axis.tickPadding())
.attr('text-anchor', 'middle')
.text(function(d,i) {
var v = fmt(d);
return ('' + v).match('NaN') ? '' : v;
});

    modifier toutes les occurrences de .texte( à l' .html(

    InformationsquelleAutor Metalstorm