想在浏览器中使静态SVG图（来自matplotlib）互动

Question

我的目标是制作一个可以在浏览器中互动的图表。理想情况下，我希望找到一个文档齐全、成熟的JavaScript绘图库，并且支持SVG格式。不过据我了解，目前似乎没有这样的库，如果我错了，请纠正我。

我找到了几个替代方案。

1. 使用JavaScript图形库（比如Raphael）从头开始绘制所有内容。 这听起来像是很多不必要的、繁琐的工作。
2. 使用绘图库生成SVG，然后用JavaScript来支持互动。 这似乎更可行，不过我有一个问题：如何将元数据添加到绘图库（matplotlib）生成的SVG中？这些元数据在显示SVG时不会被看到，但可以通过JavaScript访问。

任何建议都非常感谢。

Answer 1

一种方法可以在 matplotlib 的示例库 中看到。

基本步骤如下：

1. 在 matplotlib 中，使用 element.set_gid("你的ID") 来设置你想要让它互动的元素。也就是说，在 plot()/hist()/其他函数的输出上使用 set_gid()。
2. 用 matplotlib 创建一个 svg 文件，但要用一个 StringIO 对象来代替文件。
3. 用一个 xml 库（比如 xml.etree.ElementTree）来解析这个 svg。
4. 找到你设置的 ID 对应的 xml 元素（例如 "你的ID"）。
5. 为这些元素添加 onclick 或者其他你关心的事件属性，并指定一个 javascript 函数的名字。
6. 在 xml 树中添加一个 script 元素，把你的 javascript 代码放在 CDATA 中。
7. 把这个 xml 导出为一个 svg 文件！