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

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

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

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!