Muốn tạo một bản đồ SVG tĩnh (từ matplotlib) tương tác qua trình duyệt

Question

Mục tiêu của tôi là tạo một cốt truyện mà bạn có thể tương tác trong trình duyệt. Lý tưởng nhất, tôi muốn một thư viện vẽ sơ đồ JavaScript có tài liệu và trưởng thành hỗ trợ SVG. Theo như tôi có thể nói, điều này không tồn tại, mặc dù hãy sửa tôi nếu tôi sai.

Tôi đã xác định một vài lựa chọn thay thế.

1. Sử dụng thư viện đồ họa JavaScript (ví dụ: Raphael) và vẽ mọi thứ từ đầu. Điều này có vẻ như rất nhiều công việc không cần thiết, tẻ nhạt.
2. Sử dụng thư viện vẽ sơ đồ để tạo SVG, sau đó sử dụng JavaScript để hỗ trợ tương tác. Điều này có vẻ dễ quản lý hơn, mặc dù tôi có vấn đề sau: Làm thế nào tôi có thể thêm siêu dữ liệu vào SVG từ thư viện vẽ (matplotlib)? Siêu dữ liệu này sẽ không được hiển thị khi SVG được hiển thị, nhưng nó có thể truy cập được từ JavaScript.

Bất kỳ lời khuyên nào được đánh giá cao.

Answer 1

Một tìm kiếm mang này: http://www.farinspace.com/top-svg-javascript-libraries-worth-looking-at/

Tôi đã sử dụng các thư viện sau cho đồ thị:

1. jqPlot - Rất tốt nhưng không hỗ trợ svg chưa
2. HTML5 Canvas - Có, tôi đã phải làm rất nhiều từ đầu (thậm chí là các chú giải công cụ) nhưng có tính linh hoạt tuyệt vời để chơi với

Answer 2

Nếu mục tiêu của bạn là lấy kết quả từ một svg tĩnh được tạo bởi một số công cụ vẽ, và biến nó thành một cái gì đó tương tác, sau đó bạn có thể sẽ phải đi lên với một cái gì đó chính mình vì đầu ra rất có thể sẽ khác nhau cho mỗi công cụ như vậy.

Tuy nhiên, có rất nhiều thư viện SVG biểu đồ tương tác trên mạng, một số ví dụ:

• JSXGraph
• Highcharts
• D3.js
• ... và more

Answer 3

Một cách này có thể được nhìn thấy trong matplotlib gallery.

Về cơ bản:

1. Trong matplotlib, sử dụng element.set_gid ("youridhere") trên các yếu tố matplotlib bạn muốn thực hiện tương tác. Đó là, sử dụng set_gid() trên đầu ra từ plot()/hist()/whatever().
2. Tạo svg bằng matplotlib, nhưng sử dụng đối tượng StringIO làm tệp của bạn.
3. Phân tích cú pháp svg bằng thư viện xml (ví dụ: xml.etree.ElementTree)
4. Tìm các phần tử xml có id mà bạn đã đặt (ví dụ: "youridhere").
5. Thêm thuộc tính onclick/on $ {theeventyoucareabout} với tên hàm javascript.
6. Thêm phần tử tập lệnh với javascript của bạn dưới dạng CDATA vào cây xml.
7. Xuất tệp xml thành tệp svg!

Answer 4

Có một backend HTML5: http://code.google.com/p/mplh5canvas/