108

この例を参照すると、次のようになります。

http://vallandingham.me/stepper_steps.html

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

D3 が jQuery よりも簡単な関数と、その逆の関数を知りたいと思っています。jQuery をベースとして使用するグラフ作成および視覚化ライブラリは多数あります (例: 、、 )。

どのように違うのか、具体例を挙げてください。

4

7 に答える 7

99

  • D3 はデータ駆動型ですが、jQuery はそうではありません。jQueryでは要素を直接操作しますが、D3では、D3 の固有の を介してデータとコールバックを提供し、メソッドと D3 は要素を操作します。data()enter()exit()

  • 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();
于 2013-04-30T01:49:08.690 に答える
61

d3にはばかげた説明があります。jQueryとd3はまったく似ていません。同じ目的で使用しないだけです。

jQueryの目的は、一般的なDOM操作を行うことです。それはあなたがしたいと思うかもしれないすべてのための汎用javascriptツールキットです。

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

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

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

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

@JohnSの答えもとても良いです。FluentAPI=メソッドチェーン。プラグインと拡張機能がライブラリをどこに導くかについても同意します。

于 2012-11-01T23:39:20.173 に答える
15

最近はどちらも少しずつ使っています。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"}
于 2013-08-16T23:26:40.580 に答える
11

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

誰が反対票を投じたのかわかりませんが、もう少し明確にさせてください。

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

一方、Jquery の唯一の目的は、より少ないコードを記述することです。これは、多くのブラウザーでテストされている JavaScript の簡略版です。Web ページに多くの jquery がない場合。よく使うライブラリです。シンプルで、複数のブラウザー用の JavaScript 開発に多くの労力を費やします。

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

于 2014-08-19T13:24:07.173 に答える
10

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

jQueryは、DOM操作用に作成されており、多くの基本的なJSタスクの作業を容易にします。

データをきれいでインタラクティブな画像に変換したい場合は、D3が最適です。

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

于 2012-11-01T23:39:22.653 に答える
8

素晴らしい質問です！

どちらのライブラリも同じ機能の多くを共有していますが、jQuery と D3 の最大の違いは焦点にあるように思えます。

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

D3 はデータ (操作と視覚化) に重点を置いており、最新のブラウザーのみをサポートしています。見た目は jQuery に似ていますが、使い方はかなり難しくなっています。

于 2014-04-09T11:05:22.587 に答える