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

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);
            }
        }
    });
}

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

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!