Bagaimana untuk Membungkus Teks dalam D3 dengan Had Aksara?

Membalut Teks dalam D3

Untuk membalut teks dalam D3, anda boleh melaksanakan fungsi yang secara dinamik menambah berbilang elemen ke nod dalam had aksara tertentu:

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

Kemudian, bukannya menetapkan secara langsung teks setiap nod, anda mesti memanggil fungsi bungkus padanya:

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

Ini akan membalut anda teks berdasarkan had aksara yang ditentukan dalam lingkungan nod, membenarkan mereka mengalir secara semula jadi seperti dalam contoh yang disediakan.

Atas ialah kandungan terperinci Bagaimana untuk Membungkus Teks dalam D3 dengan Had Aksara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!