想通过浏览器制作静态SVG图（来自matplotlib） [英] Want to make static SVG plot (from matplotlib) interactive via the browser

问题描述

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

My goal is to make a plot that you can interact with in the browser. Ideally, I would like a well-documented and mature JavaScript plotting library that supports SVG. As far as I can tell, this doesn't exist, though please correct me if I'm wrong.

我已经确定了几种选择。

I've identified a couple alternatives.

1. 使用JavaScript图形库（例如Raphael）并从头开始绘制所有内容。这似乎是很多不必要的，乏味的工作。


2. 使用绘图库生成SVG，然后使用JavaScript支持交互。这似乎更易于管理，但我确实遇到以下问题：我怎么能从绘图库（matplotlib）向SVG添加元数据？显示SVG时不会显示此元数据，但可以从JavaScript访问。

1. Use a JavaScript graphics library (e.g. Raphael) and draw everything from scratch. This seems like a lot of unnecessary, tedious work.
2. Use a plotting library to produce SVG, then use JavaScript to support interaction. This seems more manageable, though I do have the following problem: How can I add metadata to the SVG from the plotting library (matplotlib)? This metadata would not be shown when the SVG is displayed, but it would be accessible from JavaScript.

非常感谢任何建议。

推荐答案

一种方法可以在 matplotlib gallery 。

基本上：

1. 在matplotlib中，在要进行交互的matplotlib元素上使用element.set_gid（youridhere）。也就是说，在plot（）/ hist（）/ whatever（）的输出上使用set_gid（）。


2. 使用matplotlib创建svg，但使用StringIO对象作为文件。 / li>
   
3. 使用xml库解析svg（例如xml.etree.ElementTree）


4. 查找具有您设置的id的xml元素（例如youridhere ）。


5. 使用javascript函数名添加onclick / on $ {theeventyoucareabout}属性。


6. 使用javascript作为CDATA添加脚本元素到xml树。


7. 将xml导出到svg文件！

1. In matplotlib, use element.set_gid("youridhere") on the matplotlib element you wish to make interactive. That is, use set_gid() on the output from plot()/hist()/whatever().
2. Create an svg with matplotlib, but use a StringIO object as your file.
3. Parse the svg with an xml library (e.g. xml.etree.ElementTree)
4. Find the xml elements with the id that you set (e.g. "youridhere").
5. Add onclick/on${theeventyoucareabout} attributes with a javascript function name.
6. Add a script element with your javascript as a CDATA to the xml tree.
7. Export the xml to an svg file!

这篇关于想通过浏览器制作静态SVG图（来自matplotlib）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！