Answers:
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();
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 =方法链接。我也同意插件和扩展将库引导到何处。
我最近都在使用这两者。由于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"}
.attr('data-hash', '654687867asaj')
.data()
在jQuery中,基本上是访问html属性的快捷方式data-<custom-name>
。但是在D3中,它与html数据属性无关,而在D3中,它做的是返回一个新的选择,即以args形式传递的数据与已经选择的元素进行联接。
D3不仅涉及视觉图形。数据驱动的文档。使用d3时,将数据绑定到dom节点。由于有了SVG,我们可以制作图表,但D3的功能远不止这些。您可以使用D3替换诸如Backbone,Angular和Ember之类的框架。
不确定谁投了反对票,但让我补充一点清晰度。
许多网站从服务器请求数据,这些数据通常来自数据库。当网站收到此数据时,我们必须对新内容进行页面更新。许多框架都这样做,而d3也是如此。因此,可以使用html元素代替使用svg元素。当您调用重绘时,它将使用新内容快速更新页面。没有所有额外的开销(例如jquery,b骨干及其插件,angular等),这真是太好了。您只需要知道d3。现在d3不再包含路由系统。但您总能找到一个。
另一方面,jQuery的唯一目的是编写更少的代码。它只是javascript的简化版本,已经在许多浏览器上进行了测试。如果您的网页上没有很多jquery。这是一个很棒的库。它很简单,并且可以为多种浏览器开发JavaScript。
如果您尝试以类似d3的方式实现jquery,它将非常慢,因为它不是针对该任务而设计的,同样,d3并非旨在将数据发布到服务器,而是仅用于消费和呈现数据。 。
好问题!
尽管这两个库都具有许多相同的功能,但在我看来,jQuery和D3之间的最大区别是焦点。
jQuery是一个通用库,重点是跨浏览器和易于使用。
D3专注于数据(操作和可视化),仅支持现代浏览器。虽然它看起来确实像jQuery,但使用起来却困难得多。
两者都可以解决创建和操作DOM的相同目的(无论是HTML还是SVG)。D3展示了一个API,该API简化了您在基于数据生成/操作DOM时要执行的常见任务。它通过对data()函数的数据绑定的本机支持来实现此目的。在jQuery中,您将必须手动处理数据并定义如何绑定到数据以生成DOM。因此,您的代码变得更具过程性,并且难以推理和遵循。使用D3,步骤/代码更少,更具声明性。D3还提供了一些高级功能,有助于在SVG中生成数据可视化。诸如range(),domain()和scale()之类的函数使获取数据并将其绘制在图形上更加容易。像axis()这样的函数还使绘制图表/图形中期望的常见UI元素变得更加容易。