Comment envelopper du texte dans des arborescences D3 pour un attrait visuel amélioré ?

Envelopper le texte dans D3

Défi

Pour améliorer l'attrait visuel d'un diagramme en arbre D3, il est souhaitable d'envelopper le texte de manière à ce qu'il s'adapte parfaitement dans l’espace disponible. Considérons le texte suivant :

Foo is not a long word

Nous cherchons à envelopper ce texte comme suit :

Foo is
not a
long word

Solution

La clé pour envelopper le texte dans D3 réside dans l'utilisation du élément dans l'élément élément. permet la création de plusieurs lignes de texte dans un seul node.

Pour ce faire, nous modifions l'exemple « Wrapping Long Labels » de Mike Bostock et introduisons deux changements clés :

1. Définissez une fonction wrap : Cette fonction prend du texte et une largeur maximale comme arguments et insère éléments pour envelopper le texte en conséquence.

function wrap(text, width) {
    // Implement text wrapping logic...
}

2. Utiliser le wrap dans le code : Au lieu de définir directement le texte de chaque nœud, nous appelons la fonction wrap sur l'élément de texte de chaque nœud.

// Add entering nodes with wrapped text.
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);

Cette approche garantit que le texte à l'intérieur de chaque nœud est enveloppé pour s'adapter à une largeur maximale spécifiée, améliorant ainsi la présentation visuelle de l'arborescence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!