Matplotlib SVG Tooltip

Введение

Этот практикум представляет собой пошаговое руководство по созданию подсказки, которая будет появляться при наведении курсора на элемент matplotlib. Мы создадим подсказку в matplotlib и просто переключим ее видимость при наведении курсора на элемент. Этот подход позволяет полностью контролировать расположение и внешний вид подсказки, но требует написания большего количества кода с самого начала.

Советы по работе с ВМ

После запуска ВМ перейдите в левый верхний угол и переключитесь на вкладку Ноутбук, чтобы приступить к практике в Jupyter Notebook.

Иногда может потребоваться подождать несколько секунд, пока Jupyter Notebook полностью загрузится. Проверка операций не может быть автоматизирована из-за ограничений Jupyter Notebook.

Если вы сталкиваетесь с проблемами во время обучения, не стесняйтесь обращаться к Labby. Оставьте отзыв после занятия, и мы оперативно решим проблему для вас.

Создаем фигуры

Сначала мы создаем фигуры, к которым будут привязываться подсказки.

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

Добавляем фигуры и аннотации для подсказок

Затем мы добавляем фигуры и аннотации для подсказок на график. Аннотации для подсказок создаются с использованием метода annotate. Мы задаем параметр xy координатами фигуры и xytext значением (0, 0), чтобы расположить подсказку непосредственно над фигурой. Также мы задаем параметр textcoords значением 'offset points', чтобы выровнять подсказку с фигурой. Мы задаем параметр color значением 'w', чтобы сделать текст белым, ha значением 'center', чтобы выровнять текст по горизонтали, fontsize значением 8, чтобы установить размер шрифта, и bbox, чтобы задать стиль рамки подсказки.

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

Сохраняем график в формате SVG

Мы сохраняем график в фиктивный файловый объект с использованием класса BytesIO и метода savefig.

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

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

Добавляем интерактивность

Добавляем интерактивность к графику, создавая подсказку, которая будет включаться и выключаться при наведении курсора на фигуры. Для этого создаем XML-дерево из SVG-файла, скрываем подсказки и назначаем вызовы onmouseover и onmouseout для фигур. Также определяем функции ShowTooltip и HideTooltip, которые будут вызываться при наведении курсора на фигуры.

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

for i in shapes:
    ## Получаем индекс фигуры
    index = shapes.index(i)
    ## Скрываем подсказки
    tooltip = xmlid[f'mytooltip_{index:03d}']
    tooltip.set('visibility', 'hidden')
    ## Назначаем вызовы onmouseover и onmouseout для фигур.
    mypatch = xmlid[f'mypatch_{index:03d}']
    mypatch.set('onmouseover', "ShowTooltip(this)")
    mypatch.set('onmouseout', "HideTooltip(this)")

## Это скрипт, определяющий функции ShowTooltip и 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>
    """

## Вставляем скрипт в начало файла и сохраняем его.
tree.insert(0, ET.XML(script))
ET.ElementTree(tree).write('svg_tooltip.svg')

Резюме

В этом практическом занятии мы узнали, как создать подсказку, которая появляется при наведении курсора на фигуру в matplotlib. Мы создали подсказку в matplotlib и просто переключали ее видимость при наведении курсора на фигуру. Также мы добавили интерактивность к графику, создав подсказку, которая будет включаться и выключаться при наведении курсора на фигуры.