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用于创建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();

Answer 2

d3有一个愚蠢的描述。 jQuery和d3完全没有相似之处，你只是不要将它们用于同样的事情。

jQuery的目的是做一般的dom操作。它是一个通用的javascript工具包，可用于您可能想要做的任何事情。

d3的主要目的是使用数据轻松制作闪亮的图形。如果你想对数据进行图形化可视化，你肯定应该使用它（或类似的东西，或者建立在它之上的东西）。

如果您想要一个通用的JS库来满足您的所有交互式表单需求，请考虑使用jQuery或proto或mootools。如果你想要一些小东西，请考虑下划线.js。如果你想要依赖注入和可测试性的东西，请考虑AngularJS。

来自维基百科的General comparison指南。

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

@ JohnS的答案也非常好。 Fluent API =方法链接。我也同意插件和扩展引导您使用库的位置。

Answer 3

我最近一直在使用这两种方法。由于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"}

Answer 4

d3用于数据可视化，它通过过滤DOM对象和应用转换来实现。

jQuery用于DOM操作，使许多基本JS任务的生活更轻松。

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

如果您想移动，操纵或修改您的网页，jQuery就是您的工具。

Answer 5

很棒的问题！

虽然两个库共享许多相同的功能，但在我看来，jQuery和D3之间的最大区别是焦点。

jQuery是一个通用的库，专注于跨浏览器和易于使用。

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

Answer 6

D3不只是视觉图。数据驱动文档。使用d3时，将数据绑定到dom节点。由于SVG我们能够制作图表，但D3更是如此。您可以使用D3替换Backbone，Angular和Ember等框架。

不确定是谁投票，但让我更加清晰。

许多网站都要求服务器提供数据，这些数据通常来自数据库。当网站收到这些数据时，我们必须对新内容进行页面更新。许多框架都这样做，而d3也这样做。因此，您可以使用html元素代替使用svg元素。当您调用重绘时，它会使用新内容快速更新页面。没有像jquery，主干+它的插件，角度等所有额外的开销真的很好。你只需要知道d3。现在d3没有烘焙路由系统。但你总能找到一个。

另一方面，Jquery，它的唯一目的是编写更少的代码。它只是在许多浏览器上测试过的javascript的简写版本。如果你的网页上没有很多jquery。它是一个很棒的图书馆。它非常简单，并且为多个浏览器的javascript开发带来了很多痛苦。

如果你试图以类似d3的方式实现jquery，它会很慢，因为它不是为那个任务而设计的，同样，d3也没有设计将数据发布到服务器，它的设计只是为了使用和呈现数据。

Answer 7

两者都可以解决创建和操作DOM的相同目的（无论是HTML还是SVG）。 D3表示一个API，它简化了在基于数据生成/操作DOM时要执行的常见任务。它通过它通过data（）函数对数据绑定的本机支持来实现这一点。在jQuery中，您必须手动处理数据并定义如何绑定到数据以生成DOM。因此，您的代码变得更加程序化，更难以推理和遵循。使用D3，它的步骤/代码更少，声明更多。 D3还提供了一些更高级别的功能，有助于在SVG中生成数据可视化。 range（），domain（）和scale（）等函数可以更轻松地获取数据并将其绘制在图形上。像axis（）这样的函数也可以更容易地绘制图表/图形中您期望的常见UI元素。还有许多其他更高级别的api库位于D3之上，以帮助更复杂的数据可视化，包括交互式行为和动画。

D3和jQuery有什么区别？

7 个答案: