Rumah > hujung hadapan web > tutorial css > Bagaimanakah saya boleh membungkus teks dalam D3 untuk meningkatkan kebolehbacaan visualisasi pokok saya?

Bagaimanakah saya boleh membungkus teks dalam D3 untuk meningkatkan kebolehbacaan visualisasi pokok saya?

Barbara Streisand
Lepaskan: 2024-10-25 07:43:02
asal
681 orang telah melayarinya

How can I wrap text in D3 to improve the readability of my tree visualizations?

Membalut Teks dalam D3

Meningkatkan kebolehbacaan pepohon D3 boleh melibatkan teks pembalut untuk mengelakkan perkataan panjang daripada memesongkan reka letak. Ini boleh dicapai dengan menggunakan elemen, yang membolehkan penciptaan berbilang baris dalam satu blok teks.

Untuk melaksanakan pembalut teks, ikut langkah berikut:

1. Cipta Fungsi Pembalut

Berdasarkan contoh "Membungkus Label Panjang" Mike Bostock, tentukan fungsi bernama bungkus yang menambah elemen ke nod teks berdasarkan lebar yang ditentukan:

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);
            }
        }
    });
}
Salin selepas log masuk

2. Guna Pembalut Teks

Daripada menetapkan teks setiap nod secara langsung, gunakan fungsi bungkus untuk membalut teks dalam lebar yang ditentukan:

// 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);
Salin selepas log masuk

Ini akan membalut teks dalam 30 piksel, mencipta berbilang baris mengikut keperluan untuk menampung perkataan yang panjang.

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan