Tooltip de SVG de Matplotlib

Introducción

Esta práctica es un tutorial paso a paso sobre cómo crear un mensaje emergente que aparecerá al pasar el cursor sobre un recuadro de matplotlib. Crearemos el mensaje emergente en matplotlib y simplemente lo activaremos cuando se pase el cursor sobre el recuadro. Este enfoque ofrece un control total sobre la colocación y apariencia del mensaje emergente, aunque implica escribir más código al principio.

Consejos sobre la VM

Una vez que se haya iniciado la VM, haga clic en la esquina superior izquierda para cambiar a la pestaña Cuaderno y acceder a Jupyter Notebook para practicar.

A veces, es posible que tenga que esperar unos segundos a que Jupyter Notebook termine de cargarse. La validación de las operaciones no se puede automatizar debido a las limitaciones de Jupyter Notebook.

Si tiene problemas durante el aprendizaje, no dude en preguntar a Labby. Deje su retroalimentación después de la sesión y lo resolveremos rápidamente para usted.

Crear los recuadros

Primero creamos los recuadros a los que se asignarán los mensajes emergentes.

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']

Agregar recuadros y anotaciones de mensaje emergente

Luego agregamos los recuadros y las anotaciones de mensaje emergente a la gráfica. Las anotaciones de mensaje emergente se crean usando el método annotate. Establecemos el parámetro xy en las coordenadas del recuadro y xytext en (0, 0) para posicionar el mensaje emergente directamente sobre el recuadro. También establecemos el parámetro textcoords en 'offset points' para alinear el mensaje emergente con el recuadro. Establecemos el parámetro color en 'w' para que el texto sea blanco, ha en 'center' para centrar el texto horizontalmente, fontsize en 8 para establecer el tamaño de fuente y bbox para establecer el estilo de la caja del mensaje emergente.

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

Guardar la figura como SVG

Guardamos la figura en un objeto de archivo ficticio usando la clase BytesIO y el método savefig.

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

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

Agregar interactividad

Agregamos interactividad a la gráfica creando un mensaje emergente que se activará y desactivará al pasar el cursor sobre los recuadros. Hacemos esto creando un árbol XML a partir del archivo SVG, escondiendo los mensajes emergentes y asignando devoluciones de llamada onmouseover y onmouseout a los recuadros. También definimos las funciones ShowTooltip y HideTooltip que se llamarán al pasar el cursor sobre los recuadros.

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

for i in shapes:
    ## Obtener el índice de la forma
    index = shapes.index(i)
    ## Ocultar los mensajes emergentes
    tooltip = xmlid[f'mytooltip_{index:03d}']
    tooltip.set('visibility', 'hidden')
    ## Asignar devoluciones de llamada onmouseover y onmouseout a los recuadros.
    mypatch = xmlid[f'mypatch_{index:03d}']
    mypatch.set('onmouseover', "ShowTooltip(this)")
    mypatch.set('onmouseout', "HideTooltip(this)")

## Este es el script que define las funciones ShowTooltip y 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>
    """

## Insertar el script al principio del archivo y guardarlo.
tree.insert(0, ET.XML(script))
ET.ElementTree(tree).write('svg_tooltip.svg')

Resumen

En este laboratorio, aprendimos cómo crear un mensaje emergente que aparecerá al pasar el cursor sobre un recuadro de matplotlib. Creamos el mensaje emergente en matplotlib y simplemente alternamos su visibilidad cuando pasamos el cursor sobre el recuadro. También agregamos interactividad a la gráfica creando un mensaje emergente que se activará y desactivará al pasar el cursor sobre los recuadros.