Bagaimana untuk Membungkus Teks dalam Rajah Pokok D3 untuk Rayuan Visual yang Diperbaiki?

Membalut Teks dalam D3

Cabaran

Untuk meningkatkan daya tarikan visual rajah pepohon D3, adalah wajar untuk membungkus teks supaya ia sesuai kemas dalam ruang yang ada. Pertimbangkan teks berikut:

Foo is not a long word

Kami berusaha untuk membungkus teks ini seperti berikut:

Foo is
not a
long word

Penyelesaian

Kunci untuk membungkus teks dalam D3 terletak pada penggunaan elemen dalam unsur. membenarkan penciptaan berbilang baris teks dalam satu nod.

Untuk mencapainya, kami mengubah suai contoh "Membungkus Label Panjang" Mike Bostock dan memperkenalkan dua perubahan utama:

1. Tentukan fungsi bungkus: Fungsi ini mengambil teks dan lebar maksimum sebagai argumen dan sisipan elemen untuk membungkus teks dengan sewajarnya.

function wrap(text, width) {
    // Implement text wrapping logic...
}

2. Gunakan balut dalam kod: Daripada menetapkan teks setiap nod secara langsung, kami memanggil fungsi bungkus pada setiap elemen teks nod.

// Add entering nodes with wrapped text.
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);

Pendekatan ini memastikan bahawa teks dalam setiap nod dibalut agar muat dalam lebar maksimum yang ditentukan, meningkatkan persembahan visual rajah pepohon.

Atas ialah kandungan terperinci Bagaimana untuk Membungkus Teks dalam Rajah Pokok D3 untuk Rayuan Visual yang Diperbaiki?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!