Maison > interface Web > tutoriel CSS > le corps du texte

Comment puis-je envelopper du texte dans D3 pour améliorer la lisibilité de mes visualisations arborescentes ?

Barbara Streisand
Libérer: 2024-10-25 07:43:02
original
590 Les gens l'ont consulté

How can I wrap text in D3 to improve the readability of my tree visualizations?

Envelopper le texte dans D3

L'amélioration de la lisibilité des arbres D3 peut impliquer l'habillage du texte pour empêcher les mots longs de déformer la mise en page. Ceci peut être réalisé en utilisant l'option élément, qui permet la création de plusieurs lignes dans un seul bloc de texte.

Pour mettre en œuvre l'habillage du texte, suivez ces étapes :

1. Créer une fonction d'emballage

Sur la base de l'exemple "Wrapping Long Labels" de Mike Bostock, définissez une fonction nommée wrap qui ajoute éléments aux nœuds de texte en fonction d'une largeur spécifiée :

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
            x = text.attr("x"),
            y = text.attr("y"),
            dy = 0, //parseFloat(text.attr("dy")),
            tspan = text.text(null)
                        .append("tspan")
                        .attr("x", x)
                        .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", x)
                            .attr("y", y)
                            .attr("dy", ++lineNumber * lineHeight + dy + "em")
                            .text(word);
            }
        }
    });
}
Copier après la connexion

2. Appliquer l'habillage du texte

Au lieu de définir directement le texte de chaque nœud, utilisez la fonction d'habillage pour envelopper le texte dans une largeur spécifiée :

// Add entering nodes in the parent’s old position.
node.enter().append("text")
    .attr("class", "node")
    .attr("x", function (d) { return d.parent.px; })
    .attr("y", function (d) { return d.parent.py; })
    .text("Foo is not a long word")
    .call(wrap, 30);
Copier après la connexion

Cela enveloppera le texte dans 30 pixels, créant plusieurs lignes si nécessaire pour accueillir des mots longs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!