Heim > Web-Frontend > CSS-Tutorial > Wie kann ich Text in D3 umbrechen, um die Lesbarkeit meiner Baumvisualisierungen zu verbessern?

Wie kann ich Text in D3 umbrechen, um die Lesbarkeit meiner Baumvisualisierungen zu verbessern?

Barbara Streisand
Freigeben: 2024-10-25 07:43:02
Original
682 Leute haben es durchsucht

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

Text in D3 umbrechen

Um die Lesbarkeit von D3-Bäumen zu verbessern, kann das Umbrechen von Text erforderlich sein, um zu verhindern, dass lange Wörter das Layout verzerren. Dies kann durch die Verwendung des Befehls erreicht werden. Element, das die Erstellung mehrerer Zeilen innerhalb eines einzelnen Textblocks ermöglicht.

Um den Textumbruch zu implementieren, befolgen Sie diese Schritte:

1. Erstellen Sie eine Wrapping-Funktion

Basierend auf Mike Bostocks Beispiel „Wrapping Long Labels“ definieren Sie eine Funktion namens „wrapping“, die Elemente zu den Textknoten basierend auf einer angegebenen Breite:

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);
            }
        }
    });
}
Nach dem Login kopieren

2. Wenden Sie Textumbruch an

Anstatt den Text jedes Knotens direkt festzulegen, verwenden Sie die Wrap-Funktion, um den Text innerhalb einer bestimmten Breite umzubrechen:

// 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);
Nach dem Login kopieren

Dadurch wird der Text umbrochen 30 Pixel, wobei nach Bedarf mehrere Zeilen erstellt werden, um lange Wörter unterzubringen.

Das obige ist der detaillierte Inhalt vonWie kann ich Text in D3 umbrechen, um die Lesbarkeit meiner Baumvisualisierungen zu verbessern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage