Wie kann ich Textbeschriftungen in eine D3-Baumvisualisierung einbinden, um die Lesbarkeit zu verbessern?

Text im D3-Baum umbrechen

In einer D3-Baumvisualisierung ist es manchmal wünschenswert, die Textbeschriftungen auf den Knoten umzubrechen, um das zu erreichen Baum besser lesbar. Dieser Artikel zeigt, wie Sie diesen Textumbruch erreichen.

Die Herausforderung

Betrachten Sie den folgenden D3-Baum:

Foo is not a long word

Im Idealfall sollte der Text umbrechen in:

Foo is
not a
long word

Die Lösung

Um den Textumbruch zu erreichen, sind zwei wichtige Änderungen erforderlich:

1. Erstellen Sie eine Wrap-Funktion:

   Implementieren Sie eine Wrap-Funktion, um hinzuzufügen. Elemente zum Knoten und steuern Sie die Umbruchbreite:

   <code class="javascript">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);
               }
           }
       });
   }</code>

2. Verwenden Sie die Umbruchfunktion:

   Anstatt den Text auf jedem Knoten festzulegen, wenden Sie die an Wrap-Funktion:

   <code class="javascript">// 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); // wrap the text in <= 30 pixels</code>

Durch die Implementierung dieser Änderungen können Sie den Text auf den D3-Baumknoten erfolgreich umbrechen.

Das obige ist der detaillierte Inhalt vonWie kann ich Textbeschriftungen in eine D3-Baumvisualisierung einbinden, um die Lesbarkeit zu verbessern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!