Tham khảo ví dụ này:
http://vallandingham.me/stepper_steps.html
có vẻ như thư viện D3 và jQuery rất giống nhau theo nghĩa cả hai đều thực hiện thao tác DOM theo cách chuỗi đối tượng.
Tôi tò mò muốn biết những chức năng nào D3 làm dễ dàng hơn jQuery và ngược lại. Có rất nhiều thư viện vẽ đồ thị và hình ảnh hóa sử dụng jQuery làm cơ sở (ví dụ:áo sơ mi cao cấp, làm nổi, wijmo).
Vui lòng cho ví dụ cụ thể về sự khác nhau của chúng.
Câu trả lời:
D3 là hướng dữ liệu nhưng jQuery không phải là: với jQuery bạn trực tiếp thao tác các yếu tố, nhưng với D3 mà bạn cung cấp dữ liệu và callbacks qua độc đáo của D3 data(), enter()và exit()các phương pháp và D3 thao túng các yếu tố.
D3 thường được sử dụng để trực quan hóa dữ liệu nhưng jQuery được sử dụng để tạo ứng dụng web. D3 có nhiều tiện ích mở rộng trực quan hóa dữ liệu và jQuery có nhiều plugin ứng dụng web.
Cả hai đều là thư viện thao tác JavaScript DOM, có bộ chọn CSS và API thông thạo và dựa trên các tiêu chuẩn web khiến chúng trông giống nhau.
Đoạn mã sau là một ví dụ về cách sử dụng D3 không thể thực hiện được với jQuery (hãy thử nó trong jsfiddle ):
// create selection
var selection = d3.select('body').selectAll('div');
// create binding between selection and data
var binding = selection.data([50, 100, 150]);
// update existing nodes
binding
.style('width', function(d) { return d + 'px'; });
// create nodes for new data
binding.enter()
.append('div')
.style('width', function(d) { return d + 'px'; });
// remove nodes for discarded data
binding.exit()
.remove();
d3 có một mô tả ngớ ngẩn. jQuery và d3 hoàn toàn không giống nhau, bạn chỉ không sử dụng chúng cho những thứ giống nhau.
Mục đích của jQuery là thực hiện thao tác dom chung. Đó là một bộ công cụ javascript có mục đích chung cho bất cứ điều gì bạn có thể muốn làm.
d3 chủ yếu được thiết kế để giúp dễ dàng tạo các biểu đồ sáng bóng với dữ liệu. Bạn chắc chắn nên sử dụng nó (hoặc thứ gì đó tương tự, hoặc thứ gì đó được xây dựng bên trên nó) nếu bạn muốn tạo hình ảnh trực quan về dữ liệu.
Nếu bạn muốn có một thư viện JS chung cho tất cả các nhu cầu biểu mẫu tương tác của mình, hãy xem xét jQuery hoặc proto hoặc mootools. Nếu bạn muốn một cái gì đó nhỏ, hãy xem xét underscore.js. Nếu bạn muốn thứ gì đó có khả năng kiểm tra và tiêm phụ thuộc, hãy xem xét AngularJS.
Một so sánh chung dẫn từ wikipedia.
Tôi có thể hiểu tại sao ai đó lại nghĩ rằng họ giống nhau. Chúng sử dụng cú pháp bộ chọn tương tự - $ ('SELECTOR') và d3 là một công cụ cực kỳ mạnh mẽ để chọn, lọc và vận hành trên các phần tử html, đặc biệt là trong khi chuỗi các thao tác này lại với nhau. d3 cố gắng giải thích điều này cho bạn trên trang chủ của nó bằng cách tuyên bố là một thư viện mục đích chung, nhưng thực tế là hầu hết mọi người sử dụng nó khi họ muốn tạo đồ thị . Khá bất thường khi sử dụng nó cho thao tác dom trung bình của bạn vì đường cong học tập d3 rất dốc. Tuy nhiên, nó là một công cụ tổng quát hơn nhiều so với jQuery và nói chung mọi người xây dựng các thư viện khác cụ thể hơn (chẳng hạn như nvd3) trên đầu d3 thay vì sử dụng nó trực tiếp.
Câu trả lời của @ JohnS cũng rất hay. API thông thạo = chuỗi phương thức. Tôi cũng đồng ý về nơi các plugin và tiện ích mở rộng dẫn bạn đến các thư viện.
Tôi đã sử dụng một ít của cả hai gần đây. Vì d3 sử dụng bộ chọn của Sizzle nên bạn có thể trộn lẫn nhiều bộ chọn.
Chỉ cần lưu ý d3.select ('# mydiv') không trả về hoàn toàn giống với jQuery ('# mydiv'). Đó là cùng một phần tử DOM, nhưng nó được khởi tạo với các hàm tạo khác nhau. Ví dụ: giả sử bạn có phần tử sau:
<div id="mydiv" rel="awesome div" data-hash="654687867asaj"/>Và hãy lấy một số phương pháp phổ biến:
> d3.select('#mydiv').attr('rel') ;
"awesome div"
> jQuery('#mydiv').attr('rel');
"awesome div"
Có vẻ hợp pháp. Nhưng nếu bạn đi xa hơn một chút:
> d3.select('#mydiv').data();
[undefined]
> jQuery('#mydiv').data();
Object {hash: "654687867asaj"}
.attr('data-hash', '654687867asaj')
.data()trong jQuery về cơ bản là một phím tắt để truy cập thuộc tính html data-<custom-name>. Nhưng trong D3, nó không liên quan gì đến các thuộc tính dữ liệu html và những gì nó làm trong D3 là trả về một lựa chọn mới dưới dạng kết nối của dữ liệu được truyền trong args với các phần tử đã được chọn.
D3 không chỉ là đồ thị trực quan. Tài liệu theo hướng dữ liệu. Khi bạn sử dụng d3, bạn liên kết dữ liệu với các nút dom. Vì SVG, chúng tôi có thể tạo đồ thị, nhưng D3 còn nhiều hơn thế nữa. Bạn có thể thay thế các khung như Backbone, Angular và Ember bằng cách sử dụng D3.
Không chắc ai đã bỏ phiếu, nhưng hãy để tôi nói rõ hơn.
Nhiều trang web yêu cầu dữ liệu từ máy chủ, dữ liệu này thường đến từ cơ sở dữ liệu. Khi trang web nhận được dữ liệu này, chúng tôi phải cập nhật trang nội dung mới. Nhiều khung làm việc này và d3 cũng làm được điều này. Vì vậy, thay vì sử dụng phần tử svg, bạn có thể sử dụng phần tử html để thay thế. Khi bạn gọi bản vẽ lại, nó sẽ nhanh chóng cập nhật trang với nội dung mới. Thật tuyệt khi không có thêm tất cả các chi phí như jquery, backbone + plugin của nó, góc cạnh, v.v. Bạn chỉ cần biết d3. Bây giờ d3 không có hệ thống định tuyến được tích hợp vào nó. Nhưng bạn luôn có thể tìm thấy một.
Mặt khác, Jquery, mục đích duy nhất là viết ít mã hơn. Nó chỉ là một phiên bản ngắn gọn của javascript đã được thử nghiệm trên nhiều trình duyệt. Nếu bạn không có nhiều jquery trên trang web của mình. Đó là một thư viện tuyệt vời để sử dụng. Nó đơn giản và mất nhiều công sức khi phát triển javascript cho nhiều trình duyệt.
Nếu bạn cố gắng triển khai jquery theo kiểu d3 như thời trang, nó sẽ khá chậm, vì nó không được thiết kế cho nhiệm vụ đó, tương tự như vậy, d3 không được thiết kế để đăng dữ liệu lên máy chủ, nó được thiết kế chỉ để tiêu thụ và hiển thị dữ liệu .
d3 được tạo ra để trực quan hóa dữ liệu, nó thực hiện điều này bằng cách lọc qua các đối tượng DOM và áp dụng các phép biến đổi.
jQuery được tạo ra để thao tác DOM và làm cho nhiều tác vụ JS cơ bản trở nên dễ dàng hơn.
Nếu bạn đang muốn biến dữ liệu thành những bức ảnh tương tác, đẹp mắt thì D3 là một lựa chọn tuyệt vời.
Nếu bạn đang muốn di chuyển, thao tác hoặc sửa đổi trang web của mình, jQuery là công cụ của bạn.
Câu hỏi tuyệt vời!
Mặc dù cả hai thư viện chia sẻ nhiều tính năng giống nhau, nhưng đối với tôi, có vẻ như sự khác biệt lớn nhất giữa jQuery và D3 là trọng tâm.
jQuery là một thư viện mục đích chung với trọng tâm là trình duyệt chéo và dễ sử dụng.
D3 tập trung vào dữ liệu (thao tác và trực quan hóa) và chỉ hỗ trợ các trình duyệt hiện đại. Và trong khi nó trông giống như jQuery, nó khó sử dụng hơn rất nhiều.
Cả hai đều có thể giải quyết cùng một mục đích là tạo và thao tác DOM (cho dù đó là HTML hay SVG). D3 hiển thị một API giúp đơn giản hóa các tác vụ phổ biến mà bạn sẽ thực hiện khi tạo / thao tác DOM dựa trên dữ liệu. Nó thực hiện điều này thông qua hỗ trợ gốc cho việc liên kết dữ liệu thông qua hàm data (). Trong jQuery, bạn sẽ phải xử lý dữ liệu theo cách thủ công và xác định cách liên kết với dữ liệu để tạo DOM. Vì điều này, mã của bạn trở nên mang tính thủ tục hơn và khó lập luận và tuân theo hơn. Với D3, nó ít bước / mã hơn và khai báo nhiều hơn. D3 cũng cung cấp một số chức năng cấp cao hơn giúp tạo trực quan hóa dữ liệu trong SVG. Các hàm như range (), domain () và scale () giúp lấy dữ liệu và vẽ chúng trên biểu đồ dễ dàng hơn. Các hàm như axis () cũng giúp dễ dàng vẽ các phần tử giao diện người dùng phổ biến mà bạn mong đợi trong biểu đồ / đồ thị.