Bagaimanakah saya boleh membungkus label teks dalam visualisasi pokok D3 untuk kebolehbacaan yang lebih baik?

Membungkus Teks dalam Pokok D3

Dalam visualisasi pepohon D3, kadangkala adalah wajar untuk membalut label teks pada nod untuk membuat pokok lebih mudah dibaca. Artikel ini menunjukkan cara untuk mencapai pembungkusan teks ini.

Cabarannya

Pertimbangkan pokok D3 berikut:

Foo is not a long word

Sebaik-baiknya, teks harus bungkus ke:

Foo is
not a
long word

Penyelesaian

Untuk mencapai pembalut teks, dua pengubahsuaian utama diperlukan:

1. Buat Fungsi Balut:

   Laksanakan fungsi bungkus untuk menambah elemen kepada nod dan mengawal lebar pembalut:

   <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. Gunakan Fungsi Balutan:

   Daripada menetapkan teks pada setiap nod, gunakan fungsi bungkus:

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

Dengan melaksanakan pengubahsuaian ini, anda boleh berjaya membalut teks pada nod pokok D3.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membungkus label teks dalam visualisasi pokok D3 untuk kebolehbacaan yang lebih baik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!