2013-03-05 49 views
50

Tôi bị cuốn hút bởi cả d3 và Raphael. Tôi hiểu rằng Raphael là được xây dựng trên đầu trang của D3 và rằng nó là tương thích với nhiều trình duyệt, nhưng tôi không chắc cái nào phù hợp hơn cho những trường hợp nào. Ai đó có thể làm sáng tỏ một chút được không? Trường hợp sử dụng tức thời của tôi là khả năng sử dụng dòng thời gian SIMILE và tích hợp nó với một sơ đồ trạng thái (mà tôi định sử dụng d3/Raphael). Cảm ơn!D3.js vs Raphael.js

+7

Raphael có được xây dựng trên nền D3 không? Tôi không chắc. – Dve

Trả lời

41

Raphael không được xây dựng trên D3.

Raphael sẽ giúp bạn vẽ các phần tử. D3 là toàn diện hơn và sẽ giúp bạn liên kết dữ liệu với các phần tử. Vì vậy, tôi muốn nói D3 là mạnh hơn. This forum discussion Thảo luận trình bày dòng thời gian SIMILE bằng D3, chúng tham chiếu đến this project thực hiện dòng thời gian trong D3. Vì vậy, ngay từ cái nhìn đầu tiên, D3 là câu trả lời của bạn.

Tuy nhiên, với điều kiện dường như không phải là tiện ích cho D3 xử lý dòng thời gian SIMILE cho bạn, Raphael hoặc D3 có thể là lựa chọn tốt. Đó là, ngoại trừ một thực tế là D3 không hoạt động tốt với các phiên bản trước đó của trình thám hiểm internet, như được giải thích trong this article. Vì vậy, nếu bạn cần hỗ trợ các phiên bản trước của IE, bạn tốt hơn với Raphael.

26

D3 khó học hơn Raphael, nhưng trong cả hai trường hợp, bạn cũng sẽ phải học SVG để có thể tạo hoạt ảnh tốt hơn. Mặt khác, việc hiển thị D3 thường cần ít toán hơn so với các ví dụ về Xử lý hoặc Raphael tương tự vì có nhiều bố cục được đóng gói sẵn.

Tôi muốn nói D3 là lựa chọn tốt hơn vì lý do rõ ràng: D3 dựa trên chồng tiêu chuẩn web hiện tại (HTML, DOM - ngay cả khi bạn ghét nó, bạn cần sử dụng nó, CSS, SVG, thậm chí Canvas), và là thư viện để làm việc với dữ liệu. Là một khung dữ liệu, D3 cũng đóng gói đi kèm với:

  • tấn thuật toán và bố trí (lực lượng bố trí, ngăn xếp bố trí, cây xanh, vv),
  • một số dữ liệu cơ bản tranh cãi chức năng (làm tổ, thánh giá, nhóm bởi , rollups - xem các ví dụ sau: http://bl.ocks.org/phoebebright/raw/3176159/),
  • Lựa chọn kiểu jQuery,
  • và cả nguyên bản trực quan (d3.svg đi kèm với mọi thứ bạn cần cho đồ họa đơn giản).

Vì nó đứng d3 không chỉ tốt hơn Raphael và Xử lý trong nhiều trường hợp, mà còn là một thay thế khả thi cho jQuery, underscore.js và các khung công tác khác. Có rất nhiều thư viện biểu đồ được xây dựng trên đầu trang của nó, vì vậy bạn luôn có thể kéo và thả một số biểu đồ mát mẻ và viết lại trình bao bọc dữ liệu xung quanh nó.

Bạn có thể tìm thấy một số ví dụ về thời gian tốt sử dụng giao diện này: http://biovisualize.github.com/d3visualization/#visualizationType=timeline

+2

Chỉ cần rõ ràng ở đây, d3 không thể thay thế cho jquery vì d3 không đưa ra yêu cầu về tính tương thích của trình duyệt trong khi jquery sở hữu vai trò lớp tương thích. – Core

+0

Bạn rõ ràng là đúng, nhưng điều đó phụ thuộc vào những gì người quản lý/nhà phát triển của một sản phẩm nhất định quyết định làm. Nếu họ không quan tâm đến khả năng tương thích của trình duyệt hơn là dễ dàng để xem xét d3 cũng là một jQuery, gạch dưới hoặc thay thế công cụ khác. – paxRoman

10

Là một nhà tư vấn khu vực công tôi đã tìm thấy rằng việc học Raphael là một đầu tư tốt hơn cho tôi từ rất nhiều thời gian cho khách hàng của tôi sử dụng phiên bản cũ của trình duyệt. Khách hàng hiện tại của tôi sử dụng IE7 độc quyền mà Raphael làm việc hoàn hảo và D3 thì không.

Cá nhân tôi muốn sử dụng D3 hơn, nhưng chuyên nghiệp đó không phải là thực tế của tình huống của tôi.

+2

vẫn là trường hợp bạn không thể sử dụng D3 nhiều? – Nikos

15

Cả hai đều là động vật khác nhau.

RaphaelJS đơn giản hóa và mở rộng các chức năng cho đồ họa vector dựa trên SVG và VML.

D3js chỉ thao tác DOM và dựa vào các tiêu chuẩn đồ họa (SVG và Canvas, trên biểu đồ Thanh bạn cũng có thể sử dụng DIV) để vẽ. Ví dụ: d3.svg.symbol() trả về nội dung của thông số d để chuyển nó tới phần tử path trên SVG, nhưng không tự vẽ biểu tượng.

Bạn có thể sử dụng D3js để thao tác dữ liệu và vẽ nó bằng Raphael.

This blog giải thích làm thế nào để kết hợp D3js + Raphael. Và kiểm tra việc thực hiện D3 for Raphael.