Apa perbedaan antara D3 dan jQuery?

Mengacu pada contoh ini:

http://vallandingham.me/stepper_steps.html

tampaknya pustaka D3 dan jQuery sangat mirip dalam artian keduanya melakukan manipulasi DOM dengan cara perangkaian objek.

Saya ingin tahu apa fungsi D3 lebih mudah daripada jQuery dan sebaliknya. Ada banyak pustaka grafik dan visualisasi yang menggunakan jQuery sebagai basis (mis.,highcharts, flot, wijmo).

Tolong berikan contoh spesifik bagaimana mereka berbeda.

• D3 digerakkan oleh data tetapi jQuery tidak: dengan jQuery Anda secara langsung memanipulasi elemen, tetapi dengan D3 Anda menyediakan data dan callback melalui keunikan D3 data(), enter()dan exit()metode serta elemen D3 memanipulasi.

• D3 biasanya digunakan untuk visualisasi data tetapi jQuery digunakan untuk membuat aplikasi web. D3 memiliki banyak ekstensi visualisasi data dan jQuery memiliki banyak plugin aplikasi web.

• Keduanya adalah pustaka manipulasi DOM JavaScript, memiliki pemilih CSS dan API yang lancar dan didasarkan pada standar web yang membuatnya terlihat serupa.

Kode berikut adalah contoh penggunaan D3 yang tidak dimungkinkan dengan jQuery (coba di 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 memiliki deskripsi yang konyol. jQuery dan d3 sama sekali tidak mirip, Anda hanya tidak menggunakannya untuk hal yang sama.

Tujuan jQuery adalah untuk melakukan manipulasi dom umum. Ini adalah toolkit javascript tujuan umum untuk apa pun yang mungkin ingin Anda lakukan.

d3 terutama dirancang untuk memudahkan pembuatan grafik mengkilap dengan data. Anda pasti harus menggunakannya (atau sesuatu yang serupa, atau sesuatu yang dibangun di atasnya) jika Anda ingin membuat visualisasi grafis dari data.

Jika Anda menginginkan pustaka JS tujuan umum untuk semua kebutuhan formulir interaktif Anda, pertimbangkan jQuery atau proto atau mootools. Jika Anda menginginkan sesuatu yang kecil, pertimbangkan underscore.js. Jika Anda menginginkan sesuatu dengan injeksi ketergantungan dan testabilitas, pertimbangkan AngularJS.

Panduan perbandingan umum dari wikipedia.

Saya dapat melihat mengapa seseorang akan berpikir bahwa mereka serupa. Mereka menggunakan sintaks pemilih yang serupa - $ ('SELECTOR'), dan d3 adalah alat yang sangat ampuh untuk memilih, memfilter, dan mengoperasikan elemen html, terutama saat merangkai operasi ini bersama-sama. d3 mencoba menjelaskan hal ini kepada Anda di beranda dengan mengklaim sebagai pustaka serba guna, tetapi kenyataannya kebanyakan orang menggunakannya saat mereka ingin membuat grafik . Sangat tidak biasa menggunakannya untuk manipulasi dom rata-rata karena kurva pembelajaran d3 sangat curam. Namun, ini adalah alat yang jauh lebih umum daripada jQuery, dan umumnya orang membangun pustaka lain yang lebih spesifik (seperti nvd3) di atas d3 daripada menggunakannya secara langsung.

Jawaban @ JohnS juga sangat bagus. Fluent API = perangkaian metode. Saya juga setuju tentang ke mana plugin dan ekstensi membawa Anda ke perpustakaan.

Saya telah menggunakan sedikit dari keduanya belakangan ini. Karena d3 menggunakan penyeleksi Sizzle, Anda dapat mencampur banyak selektor.

Ingatlah bahwa d3.select ('# mydiv') tidak mengembalikan sama seperti jQuery ('# mydiv'). Ini adalah elemen DOM yang sama, tetapi dibuat dengan konstruktor berbeda. Misalnya, Anda memiliki elemen berikut:

<div id="mydiv" rel="awesome div" data-hash="654687867asaj"/>

Dan mari kita ambil beberapa metode umum:

> d3.select('#mydiv').attr('rel') ;
 "awesome div"

> jQuery('#mydiv').attr('rel');
 "awesome div"

Kelihatannya mantap. Tetapi jika Anda melangkah lebih jauh:

> d3.select('#mydiv').data();
 [undefined]

> jQuery('#mydiv').data();
 Object {hash: "654687867asaj"}

D3 bukan hanya tentang grafik visual. Dokumen Berbasis Data. Saat Anda menggunakan d3, Anda mengikat data ke node dom. Karena SVG kami dapat membuat grafik, tetapi D3 jauh lebih banyak. Anda dapat mengganti kerangka kerja seperti Backbone, Angular, dan Ember dengan menggunakan D3.

Tidak yakin siapa yang memilih, tapi izinkan saya menambahkan lebih banyak kejelasan.

Banyak situs web yang meminta data dari server, yang biasanya berasal dari database. Ketika situs web menerima data ini, kami harus melakukan pembaruan halaman dari konten baru. Banyak kerangka kerja melakukan ini, dan d3 melakukan ini juga. Jadi, alih-alih menggunakan elemen svg, Anda dapat menggunakan elemen html sebagai gantinya. Saat Anda memanggil gambar ulang, itu akan dengan cepat memperbarui halaman dengan konten baru. Sungguh menyenangkan tidak memiliki semua overhead tambahan seperti jquery, backbone + pluginnya, angular, dll. Anda hanya perlu tahu d3. Sekarang d3 tidak memiliki sistem perutean yang dimasukkan ke dalamnya. Tetapi Anda selalu dapat menemukannya.

Jquery di sisi lain, satu-satunya tujuan adalah untuk menulis lebih sedikit kode. Ini hanya javascript versi singkat yang telah diuji di banyak browser. Jika Anda tidak memiliki banyak jquery di halaman web Anda. Ini perpustakaan yang bagus untuk digunakan. Ini sederhana dan membutuhkan banyak usaha dari pengembangan javascript untuk beberapa browser.

Jika Anda mencoba mengimplementasikan jquery dalam mode seperti d3, itu akan sangat lambat, karena tidak dirancang untuk tugas itu, demikian pula, d3 tidak dirancang untuk mengirim data ke server, itu dirancang hanya untuk mengkonsumsi dan merender data .

d3 dibuat untuk visualisasi data, ini dilakukan dengan memfilter melalui objek DOM dan menerapkan transformasi.

jQuery dibuat untuk manipulasi DOM dan membuat hidup lebih mudah untuk banyak tugas JS dasar.

Jika Anda ingin mengubah data menjadi gambar yang cantik dan interaktif, D3 sangat mengagumkan.

Jika Anda ingin memindahkan, memanipulasi, atau memodifikasi halaman web Anda, jQuery adalah alat Anda.

Pertanyaan bagus!

Meskipun kedua pustaka berbagi banyak fitur yang sama, menurut saya perbedaan terbesar antara jQuery dan D3 adalah fokusnya.

jQuery adalah pustaka serba guna dengan fokus untuk menjadi lintas-browser dan mudah digunakan.

D3 difokuskan pada data (manipulasi dan visualisasi) dan hanya mendukung browser modern. Dan meskipun memang terlihat seperti jQuery, ini jauh lebih sulit digunakan.

Keduanya dapat menyelesaikan tujuan yang sama untuk membuat dan memanipulasi DOM (apakah itu HTML atau SVG). D3 menampilkan API yang menyederhanakan tugas-tugas umum yang akan Anda ambil saat membuat / memanipulasi DOM berdasarkan data. Ini dilakukan melalui dukungan aslinya untuk pengikatan data melalui fungsi data (). Di jQuery Anda harus memproses data secara manual dan menentukan cara mengikat ke data untuk menghasilkan DOM. Karena itu, kode Anda menjadi lebih prosedural dan lebih sulit untuk dipikirkan dan diikuti. Dengan D3, lebih sedikit langkah / kode dan lebih deklaratif. D3 juga menyediakan beberapa fungsi tingkat tinggi yang membantu menghasilkan visualisasi data dalam SVG. Fungsi seperti range (), domain (), dan scale () mempermudah pengambilan data dan memplotnya pada grafik. Fungsi seperti axis () juga memudahkan untuk menggambar elemen UI umum yang Anda harapkan dalam diagram / grafik.