Protovis vs D3.js


84

TLDR: Có ai có kinh nghiệm về cả protovis & D3.js để chỉ ra sự khác biệt giữa hai loại này không?

Tôi đã chơi với protovis trong 2 tuần qua và nó rất tuyệt cho đến nay. Ngoại trừ bây giờ tôi dường như đã chạm vào một bức tường gạch một chút với hoạt ảnh.

protovis: http://vis.stanford.edu/protovis/

Tôi muốn thực hiện một số hoạt ảnh khá đơn giản nhưng với protovis thì cảm giác ít trực quan hơn - tôi bắt đầu nghĩ rằng protovis không bao giờ thực sự dành cho hoạt hình. Vì vậy, tôi bắt đầu xem xét D3.js:

http://mbostock.github.com/d3/ex/stack.html

Nó trông rất giống nhau, nhưng:

  • Có vẻ nhẹ hơn
  • Có vẻ như hướng đến việc tương tác với các phần tử DOM khác cũng như SVG
  • Có vẻ như hướng đến việc thêm hình ảnh động

Có ai có thể làm sáng tỏ bất kỳ sự khác biệt nào khác không?

Tôi rất biết ơn vì bất kỳ và tất cả đầu vào

Câu trả lời:


117

Tôi đã làm được nhiều việc với Protovis và một số việc với D3. Ngoài những điểm bạn đề cập, tôi nghĩ rằng những điểm khác biệt sau đây nổi bật với tôi:

  • Trong đó Protovis cung cấp một lớp trừu tượng được đơn giản hóa giữa các thuộc tính trực quan mà bạn đang chỉ định, D3 sử dụng thông số CSS và DOM thực tế - vì vậy thay vì .width(10)hoặc .fillStyle('#00C')bạn sẽ sử dụng .style('width', 10)hoặc .attr('fill', '#00C'). Trong những ví dụ này, sự khác biệt là khá nhỏ, nhưng khi bạn đang làm một cái gì đó như vẽ một đường trong hình ảnh SVG, có sự khác biệt lớn. Kết quả là việc sử dụng D3 có thể cảm thấy mức độ thấp hơn một chút - bạn có nhiều quyền kiểm soát hơn, nhưng bạn phải khá quen thuộc với cú pháp SVG để thực hiện một số việc mà Protovis thực hiện dễ dàng hơn nhiều.

  • Như bạn lưu ý, Protovis đều được hiển thị trong SVG, trong khi D3 có thể sử dụng các phần khác của DOM. Điều này có nghĩa là, đối với các hình ảnh trực quan không yêu cầu các yếu tố hình ảnh dựa trên SVG, bạn có thể sử dụng D3 ngay cả với các trình duyệt không hỗ trợ SVG. Điều đó cũng có nghĩa là việc tích hợp HTML và SVG trong cùng một hình ảnh dễ dàng hơn nhiều, điều này thực sự tốt cho những thứ như xử lý văn bản (thao tác và bố cục văn bản khá yếu trong Protovis).

  • D3 thay đổi hoặc bỏ một số tiện ích Protovis cơ bản như quy mô và thao tác dữ liệu. Tôi nhiều lần khó chịu vì các tiện ích cơ bản như pv.sum()hoặc pv.mean()không có các tiện ích tương đương D3, mặc dù một số, giống như .nest(), được chia sẻ trên hai thư viện. Chỉnh sửa 10/1/12: D3 đã điền vào các tiện ích dữ liệu của nó, nhưng vẫn còn một số tiện ích mà Protovis bao gồm và D3 thì không, ví dụ:pv.dict , pv.numerate, và pv.repeat. Có lẽ chúng đã bị loại bỏ vì chúng được coi là ít hữu ích hơn.

  • D3 cung cấp các tiện ích cho các yêu cầu không đồng bộ. Khi tôi muốn điều này trong Protovis, tôi thường phải sử dụng thư viện bên ngoài (tức là jQuery).

  • Tài liệu API D3 gần như hoàn toàn thiếu hoàn toàn không đầy đủ, so với tài liệu khá chi tiết cho Protovis. Chỉnh sửa (30/8/13) : D3 hiện có tài liệu API đầy đủ và chi tiết trên GitHub , vì vậy điểm này không còn phù hợp nữa.

  • Cuối cùng, tôi chưa làm được nhiều với hoạt ảnh, nhưng tôi nghĩ bạn hoàn toàn chính xác - D3 cung cấp nhiều hỗ trợ hoạt ảnh hơn Protovis, đặc biệt là về chuyển tiếp hoạt ảnh. Protovis có thể kết xuất lại một số hoặc tất cả hình ảnh theo yêu cầu, nhưng không có bất kỳ hỗ trợ nào để chuyển qua hoạt ảnh có thời lượng giới hạn - bạn phải viết mã tất cả bằng tay setInterval. D3 dường như làm cho điều này trở thành một phần không thể thiếu của thư viện.

Chỉnh sửa (7/12/11) : Có vẻ như có một sự khác biệt lớn mới - kể từ ngày 28 tháng 6 năm 2011, Protovis không còn được phát triển tích cực nữa và nhóm Protovis đang thúc đẩy D3.js thay thế. Bản phát hành cuối cùng khá ổn định, vì vậy điều này sẽ không ngăn bạn sử dụng nó, nhưng đó chắc chắn là một điểm cần xem xét.


Khá đúng, ngoại trừ điểm thứ ba. Bạn có thể nhúng đồ họa Protovis vào một phần tử HTML tùy ý.
Geoff

@Jeff - Tôi có thể đã phóng đại quá mức vụ việc. Quan điểm của tôi là D3 nhằm mục đích hoạt động với các phần tử tùy ý, trong khi thực hiện điều này với Protovis (AFAIK) yêu cầu hoạt động bên ngoài API đã thiết lập (ví dụ: bằng cách đặt thuộc tính gốc $dom). Tôi sẽ hạ thấp điểm đó.
nrabinowitz

1
@Jeff - Suy nghĩ thứ hai, tôi đang bỏ qua hoàn toàn quan điểm đó - bằng cách nào đó tôi chưa bao giờ nhận thấy Panel#canvastài sản. Cảm ơn đã lưu ý.
nrabinowitz

Cảm ơn rất nhiều vì đã trả lời chi tiết - thats được thực sự hữu ích
Bởi Richard Powell

2
kể từ tháng 3 năm 2013, tham chiếu API cho v3 của D3 dường như đã hoàn chỉnh và nó tạo ấn tượng thực sự tốt. Ngoài ra, có một tài liệu tốt với nhiều hướng dẫn và ví dụ hay.
Mobile Entertainment

32

Có một hướng dẫn bao gồm một số điểm khác biệt giữa D3 và Protovis . Tôi đồng ý với mô tả của @ nrabinowitz, mặc dù tôi sẽ chỉ ra rằng gần đây chúng tôi đã thêm tài liệu API mở rộng .


1
Vâng, tôi vừa mới nhận thấy điều đó ngày hôm qua (đánh giá cao!). Tôi sẽ cập nhật câu trả lời của tôi cho hậu thế :).
nrabinowitz

6

Có một bài báo gần đây từ Các tác giả của Protovis / d3.js xuất bản năm 2011 http://vis.stanford.edu/files/2011-D3-InfoVis.pdf chủ yếu về d3.js nhưng có chứa một số lý do tại sao chúng đã thay đổi nhất định. những thứ trên đường từ Protovis đến d3.js.


Tôi thấy rằng bài báo hữu ích . Không cần thực hiện bất kỳ thử nghiệm nào, nó mang lại cho tôi sự đánh giá cao về nơi nó hoạt động và nơi nó không hoàn hảo. Cảm ơn.
Mike Gale
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.