Comment envelopper du texte dans D3 avec une limite de caractères ?

Envelopper le texte dans D3

Pour envelopper le texte dans D3, vous pouvez implémenter une fonction qui ajoute dynamiquement plusieurs éléments à votre nœuds dans une certaine limite de caractères :

<code class="javascript">function wrap(text, width) {
  text.each(function () {
    var words = d3.select(this)
      .text()
      .split(/\s+/);

    words = words.reverse();

    var line = [];
    var lineNumber = 0;
    var lineHeight = 1.1; // ems
    var x = text.attr("x");
    var y = text.attr("y");
    var dy = 0; // parseFloat(text.attr("dy"));

    var 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>

Ensuite, au lieu de définir directement le texte de chaque nœud, vous devez appeler la fonction wrap dessus :

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

Cela enveloppera votre texte basé sur la limite de caractères spécifiée dans les limites de votre nœuds, leur permettant de circuler naturellement comme dans l'exemple fourni.

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!