问题想通过浏览器进行静态SVG绘图（来自matplotlib）的交互

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

我已经确定了几个替代方案。

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

任何建议都非常感谢。

9316

2018-01-24 21:22

起源

只有一个想法：如果你这样做 hold(True); plot([1,2,3,4], gid='foo'); plot([4,3,2,1], gid='bar'); savefig('foobar.svg')，生成的文件将包含元素 <g id="foo"> 和 <g id="bar"> 围绕这两行，我想你可以使用Javascript来操作对象。 - Jouni K. Seppänen

嗯，是的，这可能是添加曲线特定元数据的一种方法。但是，我正在寻找一种为曲线中的每个点添加元数据的方法 - 基本上是隐藏的 z 值。如果我找不到另一个解决方案，我想我可以在其中抛出一个大的JSON字符串 id 包含我需要的所有元数据。 - David

答案:

一种方法可以在这里看到 matplotlib画廊。

基本上：

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

2018-05-10 22:19

这可能会引入很多延迟......巨大的延迟和浏览器崩溃，以及从服务器的角度来看，资源利用率很高。 - khan

是。我并不是建议在飞行中这样做。问题是生成一个交互式SVG。这将生成一个SVG，可以作为静态文件托管，没有任何问题。 - Tim Swast

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

2018-05-10 22:38

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

我使用了以下库来表示图形：

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

2018-01-24 21:42

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

但是，有很多交互式SVG图形库，例如：

2018-01-25 09:53

问题 想通过浏览器进行静态SVG绘图（来自matplotlib）的交互

答案:

热门问题

问题想通过浏览器进行静态SVG绘图（来自matplotlib）的交互