D3 和​​ jQuery 有什么区别？

参考这个例子：

http://vallandingham.me/stepper_steps.html http://vallandingham.me/stepper_steps.html

看起来 D3 和 jQuery 库非常相似，因为它们都以对象链接方式进行 DOM 操作。

我很好奇 D3 使哪些函数比 jQuery 更容易，反之亦然。有很多使用 jQuery 作为基础的图形和可视化库（例如，高图表 /questions/tagged/highcharts, flot /questions/tagged/flot, wijmo /questions/tagged/wijmo).

请举例说明它们有何不同。

• D3 is 数据驱动但 jQuery 不是：使用 jQuery你直接操纵元素，但使用 D3您提供数据和回调通过D3独特的data(), enter() and exit()方法和 D3 操作元素。

• D3 通常用于数据可视化，但 jQuery 用于创建 Web 应用程序。 D3 有许多数据可视化扩展，jQuery 有许多 Web 应用程序插件。

• 两者都是 JavaScript DOM 操作库，具有 CSS 选择器和 Fluent API，并且都基于 Web 标准，这使得它们看起来很相似。

以下代码是 D3 用法的示例，这对于 jQuery 是不可能的（尝试一下jsfiddle http://jsfiddle.net/as96qngg/):

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