javascript - D3 和​​ jQuery 有什么区别？

Question

引用这个例子:

http://vallandingham.me/stepper_steps.html

从某种意义上说，D3 和 jQuery 库似乎非常相似，它们都以对象链方式进行 DOM 操作。

我很好奇 D3 使哪些函数比 jQuery 更容易，反之亦然。有许多以 jQuery 为基础的图形和可视化库(例如 highcharts、flot、wijmo)。

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

Answer 1

• D3 是数据驱动但 jQuery 不是:使用 jQuery 您可以直接操作元素，但是使用 D3 您可以提供数据和回调 通过 D3 独特的 data()、enter() 和 exit() 方法和 D3 操作元素。

• D3 通常用于数据可视化，而 jQuery 用于创建网络应用程序。 D3 有很多数据可视化扩展，jQuery 有很多网络应用程序插件。

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

以下代码是 D3 用法的一个示例，它不能用 jQuery(在 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();