Créer facilement des tooltips SVG Matplotlib

Introduction

Ce laboratoire est un tutoriel étape par étape sur la manière de créer un tool-tip qui apparaîtra lorsqu'on survole un patch de matplotlib. Nous allons créer le tool-tip dans matplotlib et simplement basculer sa visibilité en survolant le patch. Cette approche offre un contrôle total sur le placement et l'apparence du tool-tip, au prix d'un code plus conséquent au départ.

Conseils sur la machine virtuelle

Une fois le démarrage de la machine virtuelle terminé, cliquez dans le coin supérieur gauche pour basculer vers l'onglet Carnet de notes pour accéder au Notebook Jupyter pour pratiquer.

Parfois, vous devrez peut-être attendre quelques secondes pour que le Notebook Jupyter ait fini de charger. La validation des opérations ne peut pas être automatisée en raison des limitations du Notebook Jupyter.

Si vous rencontrez des problèmes pendant l'apprentissage, n'hésitez pas à demander à Labby. Donnez votre feedback après la session, et nous résoudrons rapidement le problème pour vous.

Créer les patches

Nous créons d'abord des patches auxquelles seront assignés les tooltips.

rect1 = plt.Rectangle((10, -20), 10, 5, fc='blue')
rect2 = plt.Rectangle((-20, 15), 10, 5, fc='green')

shapes = [rect1, rect2]
labels = ['This is a blue rectangle.', 'This is a green rectangle']

Ajouter les patches et les annotations du tool-tip

Nous ajoutons ensuite les patches et les annotations du tool-tip à la figure. Les annotations du tool-tip sont créées à l'aide de la méthode annotate. Nous définissons le paramètre xy sur les coordonnées du patch et xytext sur (0, 0) pour positionner le tool-tip directement au-dessus du patch. Nous définissons également le paramètre textcoords sur 'offset points' pour aligner le tool-tip avec le patch. Nous définissons le paramètre color sur 'w' pour rendre le texte blanc, ha sur 'center' pour centrer le texte horizontalement, fontsize sur 8 pour définir la taille de la police et bbox pour définir le style de la boîte du tool-tip.

for i, (item, label) in enumerate(zip(shapes, labels)):
    patch = ax.add_patch(item)
    annotate = ax.annotate(labels[i], xy=item.get_xy(), xytext=(0, 0),
                           textcoords='offset points', color='w', ha='center',
                           fontsize=8, bbox=dict(boxstyle='round, pad=.5',
                                                 fc=(.1,.1,.1,.92),
                                                 ec=(1., 1., 1.), lw=1,
                                                 zorder=1))

    ax.add_patch(patch)
    patch.set_gid(f'mypatch_{i:03d}')
    annotate.set_gid(f'mytooltip_{i:03d}')

Enregistrer la figure au format SVG

Nous enregistrons la figure dans un objet de fichier fictif à l'aide de la classe BytesIO et de la méthode savefig.

ax.set_xlim(-30, 30)
ax.set_ylim(-30, 30)
ax.set_aspect('equal')

f = BytesIO()
plt.savefig(f, format="svg")

Ajouter de l'interactivité

Nous ajoutons de l'interactivité à la figure en créant un tool-tip qui sera activé et désactivé lorsqu'on survole les patches. Nous le faisons en créant un arbre XML à partir du fichier SVG, en cachant les tool-tips et en assignant des rappels onmouseover et onmouseout aux patches. Nous définissons également les fonctions ShowTooltip et HideTooltip qui seront appelées lorsqu'on survole les patches.

tree, xmlid = ET.XMLID(f.getvalue())
tree.set('onload', 'init(event)')

for i in shapes:
    ## Obtenez l'index de la forme
    index = shapes.index(i)
    ## Cachez les tool-tips
    tooltip = xmlid[f'mytooltip_{index:03d}']
    tooltip.set('visibility', 'hidden')
    ## Assignez des rappels onmouseover et onmouseout aux patches.
    mypatch = xmlid[f'mypatch_{index:03d}']
    mypatch.set('onmouseover', "ShowTooltip(this)")
    mypatch.set('onmouseout', "HideTooltip(this)")

## Voici le script définissant les fonctions ShowTooltip et HideTooltip.
script = """
    <script type="text/ecmascript">
    <![CDATA[

    function init(event) {
        if ( window.svgDocument == null ) {
            svgDocument = event.target.ownerDocument;
            }
        }

    function ShowTooltip(obj) {
        var cur = obj.id.split("_")[1];
        var tip = svgDocument.getElementById('mytooltip_' + cur);
        tip.setAttribute('visibility', "visible")
        }

    function HideTooltip(obj) {
        var cur = obj.id.split("_")[1];
        var tip = svgDocument.getElementById('mytooltip_' + cur);
        tip.setAttribute('visibility', "hidden")
        }

    ]]>
    </script>
    """

## Insérez le script en haut du fichier et enregistrez-le.
tree.insert(0, ET.XML(script))
ET.ElementTree(tree).write('svg_tooltip.svg')

Sommaire

Dans ce laboratoire, nous avons appris à créer un tool-tip qui apparaîtra lorsqu'on survole une patch de matplotlib. Nous avons créé le tool-tip dans matplotlib et avons simplement basculé sa visibilité en mode visible lorsqu'on survole la patch. Nous avons également ajouté de l'interactivité à la figure en créant un tool-tip qui sera activé et désactivé lorsqu'on survole les patches.

Tooltip SVG Matplotlib