Apa perbedaan antara D3 dan jQuery?

103

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.

javascript jquery d3.js

— zcaudate
sumber

92

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();

— Ali Shakiba
sumber

9

bagus, satu contoh bernilai lebih dari 1000 kata

— TMG

59

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.

— Kasus
sumber

1

@zcaudate, d3 tidak ada di tautan karena sangat terspesialisasi. Tautan itu hanya membandingkan kerangka umum.

— Kasus

1

Hal lain yang akan saya tambahkan adalah D3 membuat SVG (Scalable Vector Graphics). Ini bagus karena benda-benda dapat dengan mudah mengubah ukuran dan dengan mudah tetap proporsional dengan elemen lainnya. Meskipun Anda mungkin dapat mencapai hal yang sama di JQuery (seperti yang ditunjukkan di tautan contoh OP), mereka tidak dimaksudkan untuk saling menggantikan.

— EnigmaRM

2

Mereka serupa karena keduanya berjalan di Sizzle dan menggunakan penyeleksi yang sama (sebagian besar dari setiap kerangka kerja). Namun, setelah pemilihan mereka membangun objek manipulasi DOM yang sangat berbeda.

— cchamberlain

5

1 untuk deskripsi konyol. Saya meneliti banyak pustaka dan komponen sisi klien, tetapi saya tidak bisa melewati kalimat pertama di situs web mereka sebelum merasa benar-benar bingung. Saya mengklik mozaic heksagonal esoterik mewah dari 'benda' dan itu membawa saya ke suatu tempat yang misterius dan tidak terkait. Karena saya gagal memahami apa yang terjadi di sini, saya berasumsi bahwa saya tidak layak masuk klub d3. Karena itu, saya akan berkurang, dan pergi ke Barat, dan tetap tanpa d3.

— Jonathan Neufeld

13

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"}

— ffflabs.dll
sumber

Aha, bertanya-tanya mengapa .data () di d3 tidak berfungsi seperti di jquery. Di D3, harus disetel.attr('data-hash', '654687867asaj')

— prototipe

6

ini adalah perbandingan yang buruk. .data()di jQuery pada dasarnya adalah jalan pintas untuk mengakses atribut html data-<custom-name>. Tapi di D3 tidak ada hubungannya dengan atribut data html, dan apa yang dilakukannya di D3 mengembalikan pilihan baru sebagai gabungan data yang diteruskan dalam argumen dengan elemen yang sudah dipilih.

— nazikus

3

Ini perbandingan yang buruk sekarang, tapi pada 2013 tidak seburuk itu. Sejak itu, jQuery telah menghilangkan banyak polyfilling untuk browser yang lebih lama (atribut data adalah salah satunya) sementara D3 telah berhenti menjadi pustaka monolitik dan sebagai gantinya menjadi titik masuk untuk koleksi pustaka spesifik yang lebih kecil

— ffflabs

11

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 .

— jemiloii
sumber

1

"... ganti kerangka kerja seperti Backbone, Angular, dan Ember dengan menggunakan D3." bisakah kamu menjelaskan?

— Billy Moon

Dari pengalaman saya, saya telah melihat banyak orang menggunakan kerangka kerja ini untuk membuat bagan dan grafik, ketika Anda dapat menggantinya dengan d3. Jika seseorang mau, mereka juga dapat membuat data render d3 pada halaman karena itu mengikat data ke elemen. D3 dapat bekerja dengan kumpulan data besar lebih cepat daripada jQuery.

— jemiloii

tidak yakin siapa yang memberi suara negatif kepada saya, tetapi saya berharap mereka dapat memberikan komentar. D3 adalah untuk dokumen berbasis data. Bukan hanya grafik.

— jemiloii

Anda dapat membuat komponen yang dapat digunakan kembali dengan d3 dengan mudah. bost.ocks.org/mike/chart

— jemiloii

2

Tidak naif, saya hanya menggunakan d3 dan websockets untuk alat internal tempat saya bekerja. D3 berurusan dengan pengikatan data dari data yang diambil dari websockets. Saya juga menggunakan d3 untuk mengelola beberapa tampilan berbeda. Itu adalah SPA itu sendiri. D3 dapat menangani elemen html serta elemen svg. Anda tidak boleh meremehkan programmer. Inilah mengapa web itu indah bagi saya, banyak cara untuk melakukan hal yang sama. Pilih saja cara yang paling Anda sukai, itu tetap menyenangkan.

— jemiloii

10

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.

— delapan mata
sumber

7

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.

— John Slegers
sumber

3

jquery mengikuti metodologi write less do more, d3 difokuskan pada rendering data ke elemen dokumen. Ada beberapa alasan mengapa d3 lebih sulit, yang pertama menggunakan javascript mentah, dan kedua, beberapa javascript mentah diubah. Misalnya: Javascript forEach (nilai, indeks, larik), di d3 forEach (indeks, nilai, larik). Saya tidak yakin mengapa mereka membalik argumen fungsi, seperti yang saya lihat di sumbernya. Saya pikir kita bisa membuat d3 lebih cepat jika kita membatalkan fungsi yang tidak berguna.

— jemiloii

0

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.

— Steven Pena
sumber