想通過瀏覽器制作靜態SVG圖（來自matplotlib）

Question

我的目標是創建一個可以在瀏覽器中與之交互的圖。 理想情況下，我想要一個記錄良好且成熟的JavaScript繪圖庫，它支持SVG。 據我所知，這不存在，但如果我錯了請糾正我。

我已經確定了幾個替代方案。

1. 使用JavaScript圖形庫（例如Raphael）並從頭開始繪制所有內容。 這似乎是很多不必要的，乏味的工作。
2. 使用繪圖庫生成SVG，然后使用JavaScript支持交互。 這似乎更易於管理，但我確實遇到以下問題：如何從繪圖庫（matplotlib）向SVG添加元數據？ 顯示SVG時不會顯示此元數據，但可以從JavaScript訪問它。

任何建議都非常感謝。

Answer 1

在matplotlib畫廊中可以看到一種方法。

基本上：

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
• ...... 等等