D3 和 jQuery 有什么区别

发布于04月30日

Referring to this example:

http://vallandingham.me/stepper_steps.html

it seems that the D3 and jQuery libraries are very similar in the sense that they both do DOM manipulation in an object-chaining way.

I'm curious as to know what functions D3 makes easier than jQuery and vice versa. There are plenty of graphing and visualization libraries that use jQuery as a basis (e.g., highcharts, flot, wijmo).

请给出具体的例子，说明它们的不同之处.

推荐答案

D3是data-driven，但jQuery不是:使用jQuery you directly manipulate个元素，但使用D3 you provide data and callbacks到D3独特的data()、enter()和exit()方法，D3操作元素.
D3通常用于数据可视化，但jQuery用于创建webapply.D3有很多数据可视化扩展，jQuery有很多Web应用插件.
两者都是JavaScript DOM操作库，都有CSS Select 器和Fluent API，并且都基于使它们看起来相似的Web标准.

下面的代码是一个D3用法的示例，这在jQuery中是不可能的(请在jsfiddle中try ):

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