python - Matplotlib 用户界面示例因超过三个补丁而中断

Question

我正在处理这个Matplotlib User Interface example ，当我运行基本示例时，它的工作原理如广告所示。当我开始使其适应我的需求时，事情开始出现问题。

• 当我添加第三个补丁时，它仍然按照广告中的方式工作。
• 当我添加第四个补丁时，其鼠标悬停似乎映射到子图 X 轴顶部而不是补丁。
• 当我添加第五个补丁时，第四个补丁仍然映射到子图 X 轴顶部，并且我找不到第五个补丁的鼠标悬停区域。

我无法弄清楚是什么让脚本在补丁 > 3 时生气。查看脚本，似乎它应该适用于任意数量的补丁。 SVG 在 Safari、Firefox 和 Chrome 中显示相同的行为。

任何指示将不胜感激。

[Python 2.7.10，Matplotlib 1.3.1]

#! /usr/bin/env python
# -*- coding: utf-8 -*-

from io import BytesIO
import matplotlib.patches as mpatches
import matplotlib.pyplot as plt
import xml.etree.ElementTree as ET

ET.register_namespace("", "http://www.w3.org/2000/svg")

fig = plt.figure(figsize=(25,10))
fig, ax1 = plt.subplots()

ax1.add_patch(mpatches.FancyBboxPatch((1980, 1), 1, 1, boxstyle=mpatches.BoxStyle("Round", pad=0.15)))
ax1.annotate('One', xy=(1980, 1), 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))

ax1.add_patch(mpatches.FancyBboxPatch((1990, 2), 1, 1, boxstyle=mpatches.BoxStyle("Round", pad=0.15)))
ax1.annotate('Two', xy=(1990, 2), 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))

ax1.add_patch(mpatches.FancyBboxPatch((2000, 3), 1, 1, boxstyle=mpatches.BoxStyle("Round", pad=0.15)))
ax1.annotate('Three', xy=(2000, 3), 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))

ax1.add_patch(mpatches.FancyBboxPatch((2010, 4), 1, 1, boxstyle=mpatches.BoxStyle("Round", pad=0.15)))
ax1.annotate('Four', xy=(2010, 4), 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))

# Save the figure in a fake file object
ax1.set_xlim(1970, 2017)
ax1.set_ylim(0, 8)

# Set id for the patches
for i, t in enumerate(ax1.patches):
    t.set_gid('patch_%d' % i)

# Set id for the annotations
for i, t in enumerate(ax1.texts):
    t.set_gid('tooltip_%d' % i)

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

# --- Add interactivity ---

# Create XML tree from the SVG file.
tree, xmlid = ET.XMLID(f.getvalue())
tree.set('onload', 'init(evt)')

# Hide the tooltips
for i, t in enumerate(ax1.texts):
    el = xmlid['tooltip_%d' % i]
    el.set('visibility', 'hidden')

# Assign onmouseover and onmouseout callbacks to patches.
for i, t in enumerate(ax1.patches):
    el = xmlid['patch_%d' % i]
    el.set('onmouseover', "ShowTooltip(this)")
    el.set('onmouseout', "HideTooltip(this)")

# This is the script defining the ShowTooltip and HideTooltip functions.
script = """
    <script type="text/ecmascript">
    <![CDATA[

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

    function ShowTooltip(obj) {
        var cur = obj.id.slice(-1);

        var tip = svgDocument.getElementById('tooltip_' + cur);
        tip.setAttribute('visibility',"visible")
        }

    function HideTooltip(obj) {
        var cur = obj.id.slice(-1);
        var tip = svgDocument.getElementById('tooltip_' + cur);
        tip.setAttribute('visibility',"hidden")
        }

    ]]>
    </script>
    """

# Insert the script at the top of the file and save it.
tree.insert(0, ET.XML(script))
ET.ElementTree(tree).write('svg_tooltip_1.svg')

[ETA:输出路径]

探索输出路径，我得到了这个，这表明第四条路径明显有问题。

路径 1:

   <path clip-path="url(#p7ff5b81e1d)" d=" M161.28 352.08 L170.208 352.08 Q171.547 352.08 171.547 345.6 L171.547 302.4 Q171.547 295.92 170.208 295.92 L161.28 295.92 Q159.941 295.92 159.941 302.4 L159.941 345.6 Q159.941 352.08 161.28 352.08 z " style="fill:#0000ff;stroke:#000000;"/>


</g>

路径2:

   <path clip-path="url(#p7ff5b81e1d)" d=" M250.56 308.88 L259.488 308.88 Q260.827 308.88 260.827 302.4 L260.827 259.2 Q260.827 252.72 259.488 252.72 L250.56 252.72 Q249.221 252.72 249.221 259.2 L249.221 302.4 Q249.221 308.88 250.56 308.88 z " style="fill:#0000ff;stroke:#000000;"/>


</g>

路径3:

   <path clip-path="url(#p7ff5b81e1d)" d=" M339.84 265.68 L348.768 265.68 Q350.107 265.68 350.107 259.2 L350.107 216 Q350.107 209.52 348.768 209.52 L339.84 209.52 Q338.501 209.52 338.501 216 L338.501 259.2 Q338.501 265.68 339.84 265.68 z " style="fill:#0000ff;stroke:#000000;"/>


</g>

路径 4:

   <path d=" M72 43.2 L518.4 43.2" style="fill:none;stroke:#000000;"/>


</g>

Answer 1

我们得出的结论是 svg_tooltip example来自 matplotlib 页面的错误。

问题出在线路上

for i, t in enumerate(ax.patches):
    t.set_gid('patch_%d' % i)

它迭代轴中的补丁并添加一个名为 patch_<i>id</i> 的 id给他们。然而，轴的补丁可能比我们在代码中添加的补丁多得多。例如。轴刺也是补丁。因此，在迭代所有补丁时，我们可能会顺便设置 id "patch_4"到轴脊柱而不是我们想要将其设置为的补丁。

为了解决这个问题，我们实际上需要将 id 设置为应该有它的补丁，例如仅迭代添加的补丁。

这里的第二个问题:id patch_<i>id</i>保存时也会被 Canvas 中的其他元素使用。所以我们应该以不同的方式调用它，例如mypatch_<i>id</i> .

下一个问题是在设置可见性和回调时，我们也不应该迭代 Canvas 中的所有文本和补丁，而应该只迭代那些具有我们自己设置的 id 的文本和补丁。

请参阅下面的完整工作示例。

from io import BytesIO
import matplotlib.patches as mpatches
import matplotlib.pyplot as plt
import xml.etree.ElementTree as ET

ET.register_namespace("", "http://www.w3.org/2000/svg")

fig = plt.figure(figsize=(25,10))
fig, ax1 = plt.subplots()


years = [1980,1990, 2000, 2010]
labels = ["One", "Two", "Three", "Four"]

for i, year in enumerate(years):
    patch = mpatches.FancyBboxPatch((year, i+1), 1, 1, 
                        boxstyle=mpatches.BoxStyle("Round", pad=0.15))
    annotate = ax1.annotate(labels[i], xy=(year, i+1), 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))

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


# Save the figure in a fake file object
ax1.set_xlim(1970, 2017)
ax1.set_ylim(0, 8)


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

# --- Add interactivity ---

# Create XML tree from the SVG file.
tree, xmlid = ET.XMLID(f.getvalue())
tree.set('onload', 'init(evt)')


for i, y in enumerate(years):
    # Hide the tooltips
    tooltip = xmlid['mytooltip_{:03d}'.format(i)]
    tooltip.set('visibility', 'hidden')
    # Assign onmouseover and onmouseout callbacks to patches.
    mypatch = xmlid['mypatch_{:03d}'.format(i)]
    mypatch.set('onmouseover', "ShowTooltip(this)")
    mypatch.set('onmouseout', "HideTooltip(this)")

# This is the script defining the ShowTooltip and HideTooltip functions.
script = """
    <script type="text/ecmascript">
    <![CDATA[

    function init(evt) {
        if ( window.svgDocument == null ) {
            svgDocument = evt.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>
    """

# Insert the script at the top of the file and save it.
tree.insert(0, ET.XML(script))
ET.ElementTree(tree).write('svg_tooltip_2.svg')