SVG工具提示

此示例显示如何创建将在Matplotlib面片上悬停时显示的工具提示。

虽然可以从CSS或javascript创建工具提示，但在这里，我们在matplotlib中创建它，并在将其悬停在修补程序上时简单地切换它的可见性。这种方法提供了对工具提示的位置和外观的完全控制，而代价是预先获得更多的代码。

另一种方法是将工具提示内容放在SVG对象的Title属性中。然后，使用现有的js/css库，在浏览器中创建工具提示相对简单。内容由title属性决定，外观由CSS决定。

作者：David Huard

  1. import matplotlib.pyplot as plt
  2. import xml.etree.ElementTree as ET
  3. from io import BytesIO
  5. ET.register_namespace("", "http://www.w3.org/2000/svg")
  7. fig, ax = plt.subplots()
  9. # Create patches to which tooltips will be assigned.
  10. rect1 = plt.Rectangle((10, -20), 10, 5, fc='blue')
  11. rect2 = plt.Rectangle((-20, 15), 10, 5, fc='green')
  13. shapes = [rect1, rect2]
  14. labels = ['This is a blue rectangle.', 'This is a green rectangle']
  16. for i, (item, label) in enumerate(zip(shapes, labels)):
  17.     patch = ax.add_patch(item)
  18.     annotate = ax.annotate(labels[i], xy=item.get_xy(), xytext=(0, 0),
  19.                            textcoords='offset points', color='w', ha='center',
  20.                            fontsize=8, bbox=dict(boxstyle='round, pad=.5',
  21.                                                  fc=(.1, .1, .1, .92),
  22.                                                  ec=(1., 1., 1.), lw=1,
  23.                                                  zorder=1))
  25.     ax.add_patch(patch)
  26.     patch.set_gid('mypatch_{:03d}'.format(i))
  27.     annotate.set_gid('mytooltip_{:03d}'.format(i))
  29. # Save the figure in a fake file object
  30. ax.set_xlim(-30, 30)
  31. ax.set_ylim(-30, 30)
  32. ax.set_aspect('equal')
  34. f = BytesIO()
  35. plt.savefig(f, format="svg")
  37. # --- Add interactivity ---
  39. # Create XML tree from the SVG file.
  40. tree, xmlid = ET.XMLID(f.getvalue())
  41. tree.set('onload', 'init(evt)')
  43. for i in shapes:
  44.     # Get the index of the shape
  45.     index = shapes.index(i)
  46.     # Hide the tooltips
  47.     tooltip = xmlid['mytooltip_{:03d}'.format(index)]
  48.     tooltip.set('visibility', 'hidden')
  49.     # Assign onmouseover and onmouseout callbacks to patches.
  50.     mypatch = xmlid['mypatch_{:03d}'.format(index)]
  51.     mypatch.set('onmouseover', "ShowTooltip(this)")
  52.     mypatch.set('onmouseout', "HideTooltip(this)")
  54. # This is the script defining the ShowTooltip and HideTooltip functions.
  55. script = """
  56.     <script type="text/ecmascript">
  57.     <![CDATA[
  59.     function init(evt) {
  60.         if ( window.svgDocument == null ) {
  61.             svgDocument = evt.target.ownerDocument;
  62.             }
  63.         }
  65.     function ShowTooltip(obj) {
  66.         var cur = obj.id.split("_")[1];
  67.         var tip = svgDocument.getElementById('mytooltip_' + cur);
  68.         tip.setAttribute('visibility',"visible")
  69.         }
  71.     function HideTooltip(obj) {
  72.         var cur = obj.id.split("_")[1];
  73.         var tip = svgDocument.getElementById('mytooltip_' + cur);
  74.         tip.setAttribute('visibility',"hidden")
  75.         }
  77.     ]]>
  78.     </script>
  79.     """
  81. # Insert the script at the top of the file and save it.
  82. tree.insert(0, ET.XML(script))
  83. ET.ElementTree(tree).write('svg_tooltip.svg')

下载这个示例