D3和jQuery有什么区别?


Answers:


92
  • D3是数据驱动的,但jQuery不是:D3 可以直接操作元素,而D3 可以通过D3的unique来提供数据和回调data()enter()exit()方法和D3可以操纵元素。

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

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

以下代码是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();

9
不错,一个例子的价值超过1000字
TMG

59

d3的描述很愚蠢。jQuery和d3根本不相似,只是不要将它们用于相同的事情。

jQuery的目的是进行通用的dom操作。它是您可能想做的所有事情的通用javascript工具包。

d3的主要目的是使创建带有数据的闪亮图形变得容易。如果要对数据进行图形化可视化,则绝对应该使用它(或类似的东西,或基于它的东西)。

如果您希望通用JS库满足所有交互式表单需求,请考虑使用jQuery或proto或mootools。如果您想要一些小东西,请考虑使用underscore.js。如果您想要具有依赖注入和可测试性的东西,请考虑使用AngularJS。

一个通用的比较,从维基百科指南。

我明白为什么有人会认为他们很相似。它们使用类似的选择器语法-$('SELECTOR'),而d3是一个非常强大的工具,用于选择,过滤和对html元素进行操作,尤其是将这些操作链接在一起时。d3声称自己是通用库,试图在其主页上向您解释这一点,但事实是,大多数人在要制作图形时都会使用它。将其用于平均dom操作是非常不寻常的,因为d3学习曲线是如此陡峭。但是,它是比jQuery更通用的工具,通常人们在d3之上构建其他更特定的库(例如nvd3),而不是直接使用它。

@JohnS的答案也很好。流利的API =方法链接。我也同意插件和扩展将库引导到何处。


1
@ zcaudate,d3不在链接上,因为它是如此专业。该链接仅比较一般框架。
案例

1
我要补充的另一件事是D3创建了SVG(可缩放矢量图形)。这很不错,因为事物可以轻松更改大小并轻松保持与其他元素成比例。尽管您可以在JQuery中完成相同的操作(如OP的示例链接中所示),但它们并不意味着彼此替代。
EnigmaRM

2
它们的相似之处在于它们都在Sizzle上运行并使用相同的选择器(每个框架的很大一部分)。但是,选择之后,它们将构造非常不同的DOM操作对象。
cchamberlain

5
+1代表愚蠢的描述。我研究了许多客户端库和组件,但是在完全迷失之前,我并没有走过他们网站上的第一句话。我点击了“事物”这个奇特的深奥六角形马赛克,它把我带到了一个神秘而又无关的地方。由于我无法掌握此处发生的情况,因此我认为我不配D3俱乐部。因此,我将减少,进入西方,并保持D3以下。
乔纳森·诺伊费尔德

13

我最近都在使用这两者。由于d3使用Sizzle的选择器,因此您几乎可以混淆选择器。

请记住,d3.select('#mydiv')返回的结果与jQuery('#mydiv')不太相同。它是相同的DOM元素,但是正在使用不同的构造函数实例化。例如,假设您具有以下元素:

<div id="mydiv" rel="awesome div" data-hash="654687867asaj"/>

让我们获取一些常用方法:

> d3.select('#mydiv').attr('rel') ;
 "awesome div"

> jQuery('#mydiv').attr('rel');
 "awesome div"

似乎是合法的。但是,如果您走得更远:

> d3.select('#mydiv').data();
 [undefined]

> jQuery('#mydiv').data();
 Object {hash: "654687867asaj"}

啊哈,想知道为什么d3中的.data()不能像jquery中那样工作。在D3中,必须设置.attr('data-hash', '654687867asaj')
原型

6
这是一个不好的比较。.data()在jQuery中,基本上是访问html属性的快捷方式data-<custom-name>。但是在D3中,它与html数据属性无关,而在D3中,它做的是返回一个新的选择,即以args形式传递的数据与已经选择的元素进行联接。
nazikus's

3
现在比较不好,但是到2013年还不错。从那时起,jQuery为旧版浏览器放弃了很多填充(数据属性就是其中之一),而D3不再是单片库,而是成为了一些较小的特定库的入口点
ffflabs

11

D3不仅涉及视觉图形。数据驱动的文档。使用d3时,将数据绑定到dom节点。由于有了SVG,我们可以制作图表,但D3的功能远不止这些。您可以使用D3替换诸如Backbone,Angular和Ember之类的框架。

不确定谁投了反对票,但让我补充一点清晰度。

许多网站从服务器请求数据,这些数据通常来自数据库。当网站收到此数据时,我们必须对新内容进行页面更新。许多框架都这样做,而d3也是如此。因此,可以使用html元素代替使用svg元素。当您调用重绘时,它将使用新内容快速更新页面。没有所有额外的开销(例如jquery,b骨干及其插件,angular等),这真是太好了。您只需要知道d3。现在d3不再包含路由系统。但您总能找到一个。

另一方面,jQuery的唯一目的是编写更少的代码。它只是javascript的简化版本,已经在许多浏览器上进行了测试。如果您的网页上没有很多jquery。这是一个很棒的库。它很简单,并且可以为多种浏览器开发JavaScript。

如果您尝试以类似d3的方式实现jquery,它将非常慢,因为它不是针对该任务而设计的,同样,d3并非旨在将数据发布到服务器,而是仅用于消费和呈现数据。 。


1
“ ...使用D3替换诸如Backbone,Angular和Ember之类的框架。” 你能详细说明吗?
比利·穆恩

从我的经验来看,当您可以将它们替换为d3时,我已经看到许多人使用这些框架来呈现图表。如果愿意,他们还可以使d3在页面上呈现数据,因为它会将数据绑定到元素。D3可以比jQuery更快地处理大型数据集。
jemiloii 2015年

不知道是谁对我投了反对票,但我希望他们能发表评论。D3用于数据驱动的文档。不只是图表。
jemiloii 2015年

您可以使用d3 easy构建可重用的组件。bost.ocks.org/mike/chart
jemiloii

2
不幼稚,我只将d3和websockets用于我工作的内部工具。D3处理从Websocket检索到的数据的数据绑定。我还使用d3来管理一些不同的视图。那是它自己的SPA。D3可以处理html元素和svg元素。您不应该低估程序员。这就是为什么网络对我来说很美丽的原因,有很多方法可以做到这一点。只要选择您最喜欢的方式,就可以保持乐趣。
jemiloii's

10

d3专为数据可视化而设计,它通过对DOM对象进行过滤并应用转换来实现。

jQuery专为DOM操作而设计,使许多基本JS任务的工作变得更加轻松。

如果您希望将数据转换为漂亮的交互式图片,D3非常棒。

如果您要移动,操纵或以其他方式修改网页,则jQuery是您的工具。


7

好问题!

尽管这两个库都具有许多相同的功能,但在我看来,jQuery和D3之间的最大区别是焦点。

jQuery是一个通用库,重点是跨浏览器和易于使用。

D3专注于数据(操作和可视化),仅支持现代浏览器。虽然它看起来确实像jQuery,但使用起来却困难得多。


3
jQuery遵循少写多做的方法,d3专注于将数据渲染到文档元素。d3较难的原因有很多,一个原因是d3使用原始javascript,第二个原因是某些原始javascript被更改。例如:d3 forEach(索引,值,数组)中的Javascript forEach(值,索引,数组)。我不确定为什么它们会颠倒函数参数,就像我在源代码中看到的那样。我认为,如果我们取消无意义的函数,我们可以使d3更快。
jemiloii 2015年

0

两者都可以解决创建和操作DOM的相同目的(无论是HTML还是SVG)。D3展示了一个API,该API简化了您在基于数据生成/操作DOM时要执行的常见任务。它通过对data()函数的数据绑定的本机支持来实现此目的。在jQuery中,您将必须手动处理数据并定义如何绑定到数据以生成DOM。因此,您的代码变得更具过程性,并且难以推理和遵循。使用D3,步骤/代码更少,更具声明性。D3还提供了一些高级功能,有助于在SVG中生成数据可视化。诸如range(),domain()和scale()之类的函数使获取数据并将其绘制在图形上更加容易。像axis()这样的函数还使绘制图表/图形中期望的常见UI元素变得更加容易。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.