Đẩy đầu ra D3.js thông qua fabric.js để hỗ trợ IE8?

Question

Tôi đang đánh giá Fabric.js làm cách thay thế cho Raphael.js để tạo hình ảnh tương tác tương thích với IE8, không hỗ trợ SVG hoặc canvas (không hỗ trợ IE8).

Raphael có thể được thực hiện để làm việc với thư viện trực quan D3.js - kết quả đầu ra SVG và không tương thích với IE8 - thông qua thư viện cầu nối D34Raphael, một ngã ba của D3 phù hợp để sử dụng với Raphael. D34Raphael điều chỉnh một số tính năng D3 (nhưng không phải tất cả) để đưa vào các đối tượng trừu tượng của Raphael thay vì DOM, sao cho, trên IE8, Raphael có thể giải thích đầu ra của D3 là VML.

(chỉnh sửa tháng 2 năm 2014 - D34Raphael có vẻ là chết bây giờ, nhưng có một awesomely tên thay thế R2D3 rằng có vẻ là đang được phát triển tích cực)

Vải có thể sản lượng Canvas trên IE8 (sử dụng excanvas để chuyển đổi tới VML) và có thể chuyển đổi SVG thành các phần tử Canvas tương tác. Vì vậy, có vẻ như về mặt lý thuyết có thể Vải có thể thay thế Raphael trong cầu nối D3 và IE8. Làm như vậy sẽ mang lại sự linh hoạt bổ sung cũng hỗ trợ chức năng Canvas cũng như SVG.

---

tôi đã không tìm thấy bất kỳ Vải tương đương với D34Raphael - gần nhất tôi có thể tìm thấy is this demo page mà không làm việc trong IE8.

Từ những gì tôi đã xem tài liệu về Vải, có vẻ như D34Raphael có thể được dùng cho Vải: hỗ trợ chuyển đổi đường dẫn SVG, hình tròn, đa giác, đa giác, hình elip, đường thẳng, hình ảnh và hình ảnh làm việc với các đối tượng trừu tượng cho phép tương tác liên tục. Các benchmarks comparing performance of Fabric handling vector paths compared to Raphael handling the same là ấn tượng (mặc dù không có điểm chuẩn so sánh được đưa ra liên quan đến tương tác hoặc hoạt hình).

Một vài dự án D3 điển hình làm ví dụ:

• Force directed graphs
• Radial node-link tree diagrams

---

tôi chắc chắn rằng tôi không phải là người đầu tiên đã nhìn vào trong này. Tôi không thích ý tưởng khởi chạy vào việc cố gắng thực hiện một cái gì đó như thế này, chỉ để tìm thấy một số vấn đề không thể tránh khỏi mà bất cứ ai nhiều kinh nghiệm với Fabric, Canvas và/hoặc D3 có thể đã chỉ ra từ đầu.

• Có bất kỳ dự án hiện tại nào cho phép kết xuất đầu ra D3 bằng fabric.js, tương tự D34Raphael không?
• Có điều gì về cách D3 hoạt động với SVG mà chỉ đơn giản là không thể được dẫn thông qua SVG của Vải để chuyển đổi Canvas và mô hình đối tượng?
• Có cách nào đơn giản hơn để đẩy đầu ra D3 thông qua Vải hơn phương pháp D34Raphael của việc giả mạo dự án D3 và điều chỉnh đầu ra của nó không?

---

Những gì tôi đã cố gắng: Một số vấn đề tôi đã nhìn vào:

• Vải sẽ có một vấn đề tương tự như D34Raphael trong được rất hạn chế trong khả năng thích ứng của D3 Các công cụ truy vấn DOM (vì nó hoạt động với các đối tượng trừu tượng, không phải các phần tử DOM) - nhưng đó là một cái gì đó có thể được làm việc xung quanh với một cấu trúc đối tượng được tổ chức tốt.
• Cả Raphael và Fabric đều sử dụng VML trong IE8, nhưng thông qua các công cụ khác nhau, do đó có thể có sự khác biệt về những tính năng mà Raphael và các đoạn trích của Vải đã quản lý để triển khai trong VML. Trong thử nghiệm của tôi cho đến nay, cả hai đều có hiệu năng kém với hoạt ảnh và tương tác trong IE8, nhưng các tính năng có vẻ tương đương, và Vải có vẻ tốt hơn nhiều so với Raphael cho rendering VML text in IE8.
• Hiệu suất của vải với hình dạng được chuyển đổi từ SVG có vẻ tuyệt vời và có vẻ như vẽ lại, tương tác và hoạt ảnh dựa trên D3. đây).
• Dường như các nhóm của Fabric giống với các nhóm SVG nguyên gốc được làm việc bởi D3 hơn là các tập của Raphael (nhưng tôi có thể đã bỏ qua một số thứ ở đây).

---

Answer 1

Disclaimer: Tôi là tác giả của Fabric.js

Câu hỏi rất thú vị. Để giải quyết các điểm của bạn:

Có bất kỳ dự án hiện tại nào cho phép kết xuất đầu ra D3 bằng fabric.js, tương tự D34Raphael không?

Không phải là tôi biết. Nhưng từ những gì tôi có thể thấy, D3.js có đầu ra SVG. Và Vải có trình phân tích cú pháp SVG, do đó, có vẻ khá đơn giản để nạp đánh dấu của D3 cho Vải để hiển thị.

Có điều gì về cách D3 hoạt động với SVG mà chỉ đơn giản là không thể được chuyển qua SVG của Vải để chuyển đổi Canvas và mô hình đối tượng?

Tôi không thực sự quen thuộc với D3, nhưng nhìn vào một trong các ví dụ bạn đã liên kết, tôi thấy một số vấn đề tương thích thực sự. Tôi sao chép toàn bộ đánh dấu SVG của "lực lượng đạo diễn đồ thị" và nạp nó trong kitchensink

Circles được trả lại đúng-ish, nhưng cái gì là off với dòng. Thật kỳ lạ, tất cả các dòng được phân tích cú pháp và được tải lên khung chính xác. Nhưng chúng không nhìn thấy được. Tại sao? Bởi vì các kiểu của chúng trong D3.js được định nghĩa thông qua lớp ".line" và chúng tôi không hỗ trợ phân tích biểu định kiểu trong Fabric.

.link { 
    stroke: #999; 
    stroke-opacity: .6; 
} 

Nếu chúng ta "cuộn" những phong cách cho đến mỗi dòng (hoặc thông qua "đột quỵ" và "đột quỵ-opacity" thuộc tính hay style = "đột quỵ: ...; đột quỵ-opacity: ...; ") nó sẽ hoạt động như mong đợi.

Tôi tưởng tượng vấn đề với viền màu trắng xung quanh vòng tròn có cùng nguồn gốc.

Có cách nào đơn giản hơn để đẩy đầu ra D3 thông qua Vải hơn phương pháp D34Raphael khi giả mạo dự án D3 và điều chỉnh đầu ra của nó không?

Không thể nghĩ ra bất cứ điều gì thực sự.