SVG直方图

演示如何创建交互式直方图，通过单击图例标记隐藏或显示条形图。

交互性以ecmascript（javascript）编码，并在后处理步骤中插入SVG代码中。 要渲染图像，请在Web浏览器中打开它。 大多数Linux Web浏览器和OSX用户都支持SVG。 Windows IE9支持SVG，但早期版本不支持。

注意

matplotlib后端允许我们为每个对象分配id。 这是用于描述在python中创建的matplotlib对象的机制以及在第二步中解析的相应SVG构造。 虽然灵活，但它们很难用于大量物体的收集。 可以使用两种机制来简化事情：

  • 系统地将对象分组为SVG \标签，
  • 根据每个SVG对象的来源为每个SVG对象分配类。

例如，不是修改每个单独栏的属性，而是可以将列分组到PatchCollection中，或者将列分配给class =“hist _ ##”属性。

CSS也可以广泛用于替换整个SVG生成中的重复标记。

作者：david.huard@gmail.com

  1. import numpy as np
  2. import matplotlib.pyplot as plt
  3. import xml.etree.ElementTree as ET
  4. from io import BytesIO
  5. import json
  8. plt.rcParams['svg.fonttype'] = 'none'
  10. # Apparently, this `register_namespace` method works only with
  11. # python 2.7 and up and is necessary to avoid garbling the XML name
  12. # space with ns0.
  13. ET.register_namespace("", "http://www.w3.org/2000/svg")
  15. # Fixing random state for reproducibility
  16. np.random.seed(19680801)
  18. # --- Create histogram, legend and title ---
  19. plt.figure()
  20. r = np.random.randn(100)
  21. r1 = r + 1
  22. labels = ['Rabbits', 'Frogs']
  23. H = plt.hist([r, r1], label=labels)
  24. containers = H[-1]
  25. leg = plt.legend(frameon=False)
  26. plt.title("From a web browser, click on the legend\n"
  27.           "marker to toggle the corresponding histogram.")
  30. # --- Add ids to the svg objects we'll modify
  32. hist_patches = {}
  33. for ic, c in enumerate(containers):
  34.     hist_patches['hist_%d' % ic] = []
  35.     for il, element in enumerate(c):
  36.         element.set_gid('hist_%d_patch_%d' % (ic, il))
  37.         hist_patches['hist_%d' % ic].append('hist_%d_patch_%d' % (ic, il))
  39. # Set ids for the legend patches
  40. for i, t in enumerate(leg.get_patches()):
  41.     t.set_gid('leg_patch_%d' % i)
  43. # Set ids for the text patches
  44. for i, t in enumerate(leg.get_texts()):
  45.     t.set_gid('leg_text_%d' % i)
  47. # Save SVG in a fake file object.
  48. f = BytesIO()
  49. plt.savefig(f, format="svg")
  51. # Create XML tree from the SVG file.
  52. tree, xmlid = ET.XMLID(f.getvalue())
  55. # --- Add interactivity ---
  57. # Add attributes to the patch objects.
  58. for i, t in enumerate(leg.get_patches()):
  59.     el = xmlid['leg_patch_%d' % i]
  60.     el.set('cursor', 'pointer')
  61.     el.set('onclick', "toggle_hist(this)")
  63. # Add attributes to the text objects.
  64. for i, t in enumerate(leg.get_texts()):
  65.     el = xmlid['leg_text_%d' % i]
  66.     el.set('cursor', 'pointer')
  67.     el.set('onclick', "toggle_hist(this)")
  69. # Create script defining the function `toggle_hist`.
  70. # We create a global variable `container` that stores the patches id
  71. # belonging to each histogram. Then a function "toggle_element" sets the
  72. # visibility attribute of all patches of each histogram and the opacity
  73. # of the marker itself.
  75. script = """
  76. <script type="text/ecmascript">
  77. <![CDATA[
  78. var container = %s
  80. function toggle(oid, attribute, values) {
  81.     /* Toggle the style attribute of an object between two values.
  83.     Parameters
  84.     ----------
  85.     oid : str
  86.       Object identifier.
  87.     attribute : str
  88.       Name of style attribute.
  89.     values : [on state, off state]
  90.       The two values that are switched between.
  91.     */
  92.     var obj = document.getElementById(oid);
  93.     var a = obj.style[attribute];
  95.     a = (a == values[0] || a == "") ? values[1] : values[0];
  96.     obj.style[attribute] = a;
  97.     }
  99. function toggle_hist(obj) {
  101.     var num = obj.id.slice(-1);
  103.     toggle('leg_patch_' + num, 'opacity', [1, 0.3]);
  104.     toggle('leg_text_' + num, 'opacity', [1, 0.5]);
  106.     var names = container['hist_'+num]
  108.     for (var i=0; i < names.length; i++) {
  109.         toggle(names[i], 'opacity', [1,0])
  110.     };
  111.     }
  112. ]]>
  113. </script>
  114. """ % json.dumps(hist_patches)
  116. # Add a transition effect
  117. css = tree.getchildren()[0][0]
  118. css.text = css.text + "g {-webkit-transition:opacity 0.4s ease-out;" + \
  119.     "-moz-transition:opacity 0.4s ease-out;}"
  121. # Insert the script and save to file.
  122. tree.insert(0, ET.XML(script))
  124. ET.ElementTree(tree).write("svg_histogram.svg")

下载这个示例