Wie kann ich Text in D3 mit einer Zeichenbeschränkung umbrechen?

Text in D3 umbrechen

Um Text in D3 umzubrechen, können Sie eine Funktion implementieren, die dynamisch mehrere Elemente zu Ihrem Knoten innerhalb einer bestimmten Zeichenbeschränkung:

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

Anstatt den Text jedes Knotens direkt festzulegen, müssen Sie dann die Wrap-Funktion darauf aufrufen:

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

Dadurch wird Ihr Knoten umbrochen Text basierend auf der angegebenen Zeichenbeschränkung innerhalb der Grenzen Ihres Knoten, sodass sie wie im bereitgestellten Beispiel auf natürliche Weise fließen können.

Das obige ist der detaillierte Inhalt vonWie kann ich Text in D3 mit einer Zeichenbeschränkung umbrechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!