web-dev-qa-db-ja.com

D3とjQueryの違いは何ですか？

この例を参照：

http://vallandingham.me/stepper_steps.html

d3とjQueryライブラリは、どちらもオブジェクトチェーン方式でDOM操作を行うという意味で非常に似ているようです。

私は、D3がjQueryよりも簡単にする関数と、その逆を知りたいと思っています。基礎としてjQueryを使用するグラフ作成および視覚化ライブラリが多数あります（例： highcharts 、 flot 、 wijmo ）。

それらがどのように異なっているかの具体的な例を挙げてください。

javascriptjqueryd3.js
99
zcaudate

  • D3はdata-drivenですが、jQueryはそうではありません：jQueryでは要素を直接操作しますが、D3ではD3の一意のdata()、enter()およびexit()メソッドを介してデータとコールバックを提供し、D3は要素を操作します。

  • D3は通常、データの視覚化に使用されますが、jQueryはWebアプリの作成に使用されます。 D3には多くのデータ視覚化拡張機能があり、jQueryには多くのWebアプリプラグインがあります。

  • どちらもJavaScript DOM操作ライブラリであり、CSSセレクターと流なAPIを備えており、Web標準に基づいているため、似ています。

次のコードは、jQueryでは不可能なD3の使用例です（ 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();
87
Ali Shakiba

d3には馬鹿げた説明があります。 jQueryとd3はまったく似ていません。同じものに使用しないでください。

jQueryの目的は、一般的なdom操作を行うことです。これは、あなたがやりたいことをするための汎用javascriptツールキットです。

d3は主に、データを含む光沢のあるグラフを簡単に作成できるように設計されました。データをグラフィカルに視覚化する場合は、間違いなく使用する必要があります（または同様のもの、またはその上に構築されたもの）。

インタラクティブフォームのすべてのニーズに対応する汎用JSライブラリが必要な場合は、jQueryまたはprotoまたはmootoolsを検討してください。小さなものが必要な場合は、underscore.jsを検討してください。依存性注入とテスト容易性を備えたものが必要な場合は、AngularJSを検討してください。

A 一般的な比較 ウィキペディアのガイド。

なぜ誰かが似ていると思うのかわかります。これらは同様のセレクター構文を使用します-$（ 'SELECTOR'）、d3は、特にこれらの操作を連鎖させながら、html要素の選択、フィルタリング、および操作を行うための非常に強力なツールです。 d3は、汎用ライブラリーであると主張することで、ホームページでこれを説明しようとしますが、事実は、ほとんどの人がグラフを作成したいときに使用することです。 d3の学習曲線は非常に急であるため、平均的なdom操作に使用することは非常にまれです。ただし、jQueryよりもはるかに一般的なツールであり、一般的に、d3を直接使用するのではなく、d3の上に他のより具体的なライブラリ（nvd3など）を構築します。

@JohnSの答えもとても良いです。 Fluent API =メソッドチェーン。プラグインと拡張機能がライブラリであなたを導く場所についても同意します。

59
Case

私は最近両方を少し使っています。 d3はSizzleのセレクターを使用しているため、セレクターをほとんど混在させることができます。

D3.select（ '＃mydiv'）はjQuery（ '＃mydiv'）とまったく同じ結果を返さないことに注意してください。同じDOM要素ですが、異なるコンストラクターでインスタンス化されています。たとえば、次の要素があるとします。

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

そして、いくつかの一般的なメソッドを取得しましょう。

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

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

スジは通ってるようだ。しかし、さらに先へ進むと：

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

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

d3はデータの視覚化のために作成され、DOMオブジェクトをフィルタリングして変換を適用することによりこれを行います。

jQueryはDOM操作のために作られており、多くの基本的なJSタスクの作業を楽にします。

データをきれいでインタラクティブな写真に変えたいと考えているなら、D3は素晴らしいです。

Webページを移動、操作、または変更する場合は、jQueryがツールです。

11
eighteyes

D3は視覚的なグラフだけではありません。データドリブンドキュメント。 d3を使用する場合、データをdomノードにバインドします。 SVGのおかげでグラフを作成できますが、D3はそれだけではありません。 Backbone、Angular、およびEmberなどのフレームワークをD3を使用して置き換えることができます。

誰が反対票を投じたのかはわかりませんが、もう少し明確にしましょう。

多くのWebサイトは、通常はデータベースからのデータをサーバーに要求します。 Webサイトがこのデータを受信すると、新しいコンテンツのページ更新を行う必要があります。多くのフレームワークがこれを行い、d3もこれを行います。そのため、svg要素を使用する代わりに、html要素を使用できます。再描画を呼び出すと、新しいコンテンツですぐにページが更新されます。 jquery、backbone +そのプラグイン、angularなどの余分なオーバーヘッドをすべて持たないのは本当に素晴らしいことです。d3を知っているだけで十分です。現在、d3にはルーティングシステムが組み込まれていません。しかし、いつでも見つけることができます。

一方、jqueryは、より少ないコードを書くことを唯一の目的としています。これは、多くのブラウザーでテストされたjavascriptの短いバージョンです。 Webページに多くのjqueryがない場合。使用するのに最適なライブラリです。それは簡単で、複数のブラウザのためのjavascript開発から多くの苦労を取り除きます。

J3のような方法でjqueryを実装しようとした場合、そのタスク用に設計されていないため、かなり遅くなります。同様に、d3はデータをサーバーにポストするように設計されておらず、データを消費してレンダリングするために設計されています。

9
jemiloii

いい質問です！

両方のライブラリは同じ機能の多くを共有していますが、jQueryとD3の最大の違いは焦点です。

jQueryは、クロスブラウザーであり、使いやすいことに重点を置いた汎用ライブラリーです。

D3はデータ（操作と視覚化）に重点を置いており、最新のブラウザーのみをサポートしています。また、jQueryのように見えますが、使用するのははるかに困難です。

8
John Slegers

どちらも、DOMを作成および操作するという同じ目的（HTMLまたはSVG）を解決できます。 D3は、データに基づいてDOMを生成/操作するときに行う一般的なタスクを簡素化するAPIを提供します。これは、data（）関数を介したデータバインディングのネイティブサポートを通じて行われます。 jQueryでは、DOMを生成するために、データを手動で処理し、データにバインドする方法を定義する必要があります。このため、コードは手続き型になり、推論と追跡が難しくなります。 D3では、ステップ/コードが少なくなり、宣言的です。 D3は、SVGでのデータの視覚化の生成を支援するいくつかのより高いレベルの機能も提供します。 range（）、domain（）、scale（）などの関数を使用すると、データを取得してグラフにプロットしやすくなります。 axis（）のような関数を使用すると、チャート/グラフで期待される一般的なUI要素を簡単に描画できます。インタラクティブな動作やアニメーションなど、データのより複雑な視覚化を支援するために、D3の上にある他の多くの高レベルAPIライブラリがあります。

1
Steven Pena