[解決済み] D3とjQueryの違いは何ですか？

質問

この例を参照してください。

http://vallandingham.me/stepper_steps.html

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

D3がjQueryよりも簡単にできる機能は何か、逆にD3がjQueryよりも簡単にできる機能は何か、知りたいところです。jQuery をベースとして使用するグラフ作成および視覚化ライブラリはたくさんあります (例, highcharts , フローティング , ウィジモ ).

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

どのように解決するのですか？

• D3は データ駆動型 ですが、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();