D3 ve jQuery arasındaki fark nedir?

Bu örneğe istinaden:

http://vallandingham.me/stepper_steps.html

Görünüşe göre D3 ve jQuery kitaplıkları, her ikisinin de DOM manipülasyonunu bir nesne zinciri yoluyla yapmaları açısından çok benzer.

D3'ün hangi işlevleri jQuery'den daha kolay hale getirdiğini ve bunun tersini merak ediyorum. Temel olarak jQuery kullanan birçok grafik ve görselleştirme kitaplığı vardır (örn.yüksek grafikler, yüzdürmek, Wijmo).

Lütfen nasıl farklı olduklarına dair belirli örnekler verin.

• D3 olduğu veri tabanlı fakat jQuery değildir: jQuery ile doğrudan manipüle elemanlarını, ancak D3 ile veri ve geri aramalar sağlamak D3 eşsiz yoluyla data(), enter()ve exit()yöntemleri ve D3 yöneten unsurların.

• D3 genellikle veri görselleştirme için kullanılır, ancak jQuery web uygulamaları oluşturmak için kullanılır. D3'ün birçok veri görselleştirme uzantısı vardır ve jQuery'de birçok web uygulaması eklentisi vardır.

• Her ikisi de JavaScript DOM işleme kitaplıklarıdır, CSS seçicilerine ve akıcı API'ye sahiptir ve benzer görünmelerini sağlayan web standartlarına dayanmaktadır.

Aşağıdaki kod, jQuery ile mümkün olmayan D3 kullanımına bir örnektir ( jsfiddle'da deneyin ):

  // 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'ün aptalca bir açıklaması var. jQuery ve d3 hiç benzer değil, sadece aynı şeyler için kullanmıyorsunuz.

jQuery'nin amacı genel dom manipülasyonu yapmaktır. Yapmak isteyebileceğiniz her şey için genel amaçlı bir javascript araç takımıdır.

d3, öncelikle verilerle parlak grafikler oluşturmayı kolaylaştırmak için tasarlanmıştır. Verilerin grafiksel görselleştirmelerini yapmak istiyorsanız, kesinlikle kullanmalısınız (veya benzeri veya üzerine inşa edilmiş bir şey).

Tüm etkileşimli form ihtiyaçlarınız için genel amaçlı bir JS kitaplığı istiyorsanız, jQuery veya proto veya mootoolleri düşünün. Küçük bir şey istiyorsanız, undercore.js'yi düşünün. Bağımlılık ekleme ve test edilebilirlik içeren bir şey istiyorsanız, AngularJS'yi düşünün.

Bir Genel karşılaştırma wikipedia dan kılavuzu.

Birinin neden benzer olduklarını düşündüğünü anlayabiliyorum. Benzer bir seçici sözdizimi kullanırlar - $ ('SEÇİCİ') ve d3, özellikle bu işlemleri birbirine zincirlerken, html öğelerini seçmek, filtrelemek ve üzerinde çalışmak için son derece güçlü bir araçtır. d3 bunu size ana sayfasında genel amaçlı bir kitaplık olduğunu iddia ederek açıklamaya çalışır, ancak gerçek şu ki çoğu insan bunu grafik yapmak istediklerinde kullanır . Ortalama dom manipülasyonunuz için kullanmak oldukça sıra dışı çünkü d3 öğrenme eğrisi çok dik. Bununla birlikte, jQuery'den çok daha genel bir araçtır ve genellikle insanlar, doğrudan kullanmak yerine d3'ün üzerine daha özel kitaplıklar (nvd3 gibi) oluştururlar.

@ JohnS'un yanıtı da çok iyi. Akıcı API = yöntem zinciri. Ayrıca eklentilerin ve uzantıların sizi kütüphanelerde nereye götürdüğünü de kabul ediyorum.

Son zamanlarda ikisinden de biraz kullanıyorum. D3, Sizzle'ın seçicilerini kullandığından, seçicileri hemen hemen karıştırabilirsiniz.

D3.select ('# mydiv') 'in jQuery (' # mydiv ') ile tamamen aynı dönmediğini unutmayın. Aynı DOM öğesi, ancak farklı kurucularla somutlaştırılıyor. Örneğin, aşağıdaki öğeye sahip olduğunuzu varsayalım:

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

Ve bazı yaygın yöntemleri ele alalım:

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

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

Mantıklı gibi. Ama biraz daha ileri gidersen:

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

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

D3 sadece görsel grafiklerle ilgili değildir. Veriye Dayalı Belgeler. D3'ü kullandığınızda, verileri dom düğümlerine bağlarsınız. SVG sayesinde grafikler yapabiliyoruz, ancak D3 çok daha fazlası. Backbone, Angular ve Ember gibi çerçeveleri D3 kullanarak değiştirebilirsiniz.

Kimin olumsuz oy verdiğinden emin değilim, ama biraz daha netlik katayım.

Çoğu web sitesi, genellikle bir veritabanından gelen sunucudan veri ister. Web sitesi bu verileri aldığında, yeni içerik için bir sayfa güncellemesi yapmalıyız. Birçok çerçeve bunu yapar ve d3 de bunu yapar. Dolayısıyla bir svg öğesi kullanmak yerine html öğesini kullanabilirsiniz. Yeniden çizmeyi çağırdığınızda, sayfayı yeni içerikle hızlı bir şekilde günceller. Jquery, omurga + eklentileri, açısal vb. Gibi ekstra ek yüklere sahip olmamak gerçekten güzel. Sadece d3'ü bilmeniz gerekiyor. Şimdi d3'ün içine yerleştirilmiş bir yönlendirme sistemi yok. Ama her zaman bir tane bulabilirsin.

Jquery ise tek amacı daha az kod yazmaktır. Pek çok tarayıcıda test edilmiş javascript'in kısa bir sürümüdür. Web sayfanızda çok fazla jquery yoksa. Kullanmak için harika bir kütüphane. Bu basittir ve birden çok tarayıcı için javascript geliştirmeden çok fazla zahmet alır.

Jquery'yi d3 benzeri bir tarzda uygulamaya çalıştıysanız, oldukça yavaş olacaktır, çünkü bu görev için tasarlanmamıştır, aynı şekilde, d3, sunuculara veri göndermek için tasarlanmamıştır, yalnızca veri tüketmek ve işlemek için tasarlanmıştır. .

d3, veri görselleştirme için yapılmıştır, bunu DOM nesnelerini filtreleyerek ve dönüşümler uygulayarak yapar.

jQuery, DOM manipülasyonu için yapılmıştır ve birçok temel JS görevi için hayatı kolaylaştırır.

Verileri güzel, etkileşimli resimlere dönüştürmek istiyorsanız, D3 harikadır.

Web sayfanızı taşımak, değiştirmek veya başka bir şekilde değiştirmek istiyorsanız, jQuery sizin aracınızdır.

Harika soru!

Her iki kütüphane de aynı özelliklerin çoğunu paylaşırken, bana öyle geliyor ki jQuery ve D3 arasındaki en büyük fark odak noktasıdır.

jQuery, tarayıcılar arası kullanıma ve kullanımı kolay olmaya odaklanan genel amaçlı bir kitaplıktır.

D3, verilere (işleme ve görselleştirme) odaklanır ve yalnızca modern tarayıcıları destekler. Ve jQuery gibi görünse de, kullanımı çok daha zor.

Her ikisi de aynı DOM oluşturma ve işleme amacını çözebilir (ister HTML ister SVG olsun). D3, verilere dayalı olarak bir DOM oluştururken / işlerken alacağınız genel görevleri basitleştiren bir API'yi ortaya çıkarır. Bunu, data () işlevi aracılığıyla veri bağlama için yerel destek aracılığıyla yapar. JQuery'de, bir DOM oluşturmak için verileri manuel olarak işlemeniz ve verilere nasıl bağlanacağınızı tanımlamanız gerekir. Bu nedenle, kodunuz daha prosedürel hale gelir ve akıl yürütmesi ve izlemesi zorlaşır. D3 ile daha az adım / kod ve daha açıklayıcı. D3 ayrıca, SVG'de veri görselleştirme oluşturmaya yardımcı olan bazı üst düzey işlevler sağlar. Range (), domain () ve scale () gibi işlevler, verileri almayı ve bunları bir grafiğe yerleştirmeyi kolaylaştırır. Axis () gibi işlevler, bir grafikte / grafikte bekleyeceğiniz ortak kullanıcı arabirimi öğelerini çizmeyi de kolaylaştırır.