Comment puis-je envelopper des étiquettes de texte dans une visualisation arborescente D3 pour une meilleure lisibilité ?

Envelopper le texte dans l'arborescence D3

Dans une visualisation d'arborescence D3, il est parfois souhaitable d'envelopper les étiquettes de texte sur les nœuds pour rendre le arbre plus lisible. Cet article montre comment réaliser cet habillage de texte.

Le défi

Considérez l'arbre D3 suivant :

Foo is not a long word

Idéalement, le texte devrait wrap to :

Foo is
not a
long word

La solution

Pour réaliser l'habillage du texte, deux modifications clés sont requises :

1. Créer une fonction Wrap :

   Implémentez une fonction Wrap pour ajouter éléments du fichier nœuds et contrôlez la largeur d'habillage :

   <code class="javascript">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);
               }
           }
       });
   }</code>

2. Utilisez la fonction Wrap :

   Au lieu de définir le texte sur chaque nœud, appliquez la fonction wrap :

   <code class="javascript">// 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); // wrap the text in <= 30 pixels</code>

En implémentant ces modifications, vous pouvez réussir à envelopper le texte sur les nœuds de l'arborescence D3.

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!