D3和jQuery之间有什么区别？ [英] What is the difference between D3 and jQuery?

问题描述

参考此示例：

http://vallandingham.me/stepper_steps .html

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

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.

我很好奇知道什么函数D3比jQuery更容易，反之亦然。有很多图形和可视化库使用jQuery作为基础（例如， highcharts ， flot ，< a href =/ questions / tagged / wijmoclass =post-tagtitle =show questions tagged'wijmo' =tag> wijmo ）。

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是数据驱动的，但jQuery不是：使用jQuery 直接操作元素，但是使用D3 通过D3提供数据和回调 data（）， enter（）方法和D3操作元素。

  • D3 is data-driven but jQuery is not: with jQuery you directly manipulate elements, but with D3 you provide data and callbacks through D3's unique data(), enter() and exit() methods and D3 manipulates elements.

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

    D3 is usually used for data visualization but jQuery is used for creating web apps. D3 has many data visualization extensions and jQuery has many web app plugins.

    这两个都是JavaScript DOM操作库，有CSS选择器和流畅的API，

    Both are JavaScript DOM manipulation libraries, have CSS selectors and fluent API and are based on web standards which makes them look similar.

    以下代码是使用jQuery无法实现的D3使用示例它在 jsfiddle ）：

    Following code is an example of D3 usage which is not possible with jQuery (try it in 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();
    

    这篇关于D3和jQuery之间有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！