想通过浏览器制作静态SVG图（来自matplotlib）

Question

我的目标是制作一个可以在浏览器中与之交互的情节。理想情况下，我想要一个记录良好且成熟的JavaScript绘图库，它支持SVG。据我所知，这不存在，但如果我错了请纠正我。

我已经确定了几种选择。

1. 使用JavaScript图形库（例如Raphael）并从头开始绘制所有内容。这似乎是很多不必要的，乏味的工作。
2. 使用绘图库生成SVG，然后使用JavaScript支持交互。这似乎更易于管理，但我确实遇到以下问题：如何从绘图库向SVG添加元数据（matplotlib）？显示SVG时不会显示此元数据，但可以从JavaScript访问它。

非常感谢任何建议。

Answer 1

在matplotlib gallery中可以看到一种方法。

基本上：

1. 在matplotlib中，在要进行交互的matplotlib元素上使用element.set_gid（“youridhere”）。也就是说，在plot（）/ hist（）/ whatever（）的输出上使用set_gid（）。
2. 使用matplotlib创建svg，但使用StringIO对象作为文件。
3. 使用xml库解析svg（例如xml.etree.ElementTree）
4. 使用您设置的ID找到xml元素（例如“youridhere”）。
5. 使用javascript函数名称添加onclick / on $ {theeventyoucareabout}属性。
6. 使用您的javascript作为CDATA添加一个脚本元素到xml树。
7. 将xml导出到svg文件！

Answer 2

有一个HTML5后端： http://code.google.com/p/mplh5canvas/

Answer 3

搜索结果为：http://www.farinspace.com/top-svg-javascript-libraries-worth-looking-at/

我已将以下库用于图表：

1. jqPlot - 非常好但不支持svg
2. HTML5 Canvas - 是的我必须从头开始做很多事情（甚至是工具提示）但是有很大的灵活性可以玩

Answer 4

如果你的目标是从一些绘图工具生成的静态svg获取输出，并将其转换为交互式的东西，那么你可能必须自己想出一些东西，因为每个这样的工具的输出很可能是不同的

但是，有很多交互式SVG图库，其中有一些例子：

• JSXGraph
• Highcharts
• D3.js
• ...和more