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

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

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

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!