108

参考这个例子：

http://vallandingham.me/stepper_steps.html

从某种意义上说，D3 和 jQuery 库似乎非常相似，它们都以对象链接的方式进行 DOM 操作。

我很想知道 D3 使哪些功能比 jQuery 更容易，反之亦然。有大量使用 jQuery 作为基础的图形和可视化库（例如、、）。

请举例说明它们有何不同。

4

7 回答 7

99

  • D3 是数据驱动的，但 jQuery 不是：使用 jQuery ，您可以直接操作元素，但使用 D3，您可以通过 D3 的 unique和方法和 D3 操作元素来提供数据和回调。data()enter()exit()

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

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

以下代码是 jQuery 无法使用的 D3 用法示例（在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();
于 2013-04-30T01:49:08.690 回答
61

d3 有一个愚蠢的描述。jQuery 和 d3 一点也不相似，你只是不要将它们用于相同的事情。

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

d3 的主要设计目的是让使用数据制作闪亮的图表变得容易。如果您想对数据进行图形可视化，您绝对应该使用它（或类似的东西，或在它之上构建的东西）。

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

来自维基百科的一般比较指南。

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

@JohnS 的回答也很好。Fluent API = 方法链。我也同意插件和扩展将您带入库的位置。

于 2012-11-01T23:39:20.173 回答
15

我最近一直在使用两者。由于 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"}
于 2013-08-16T23:26:40.580 回答
11

D3 不仅仅是关于可视化图表。数据驱动的文档。使用 d3 时，会将数据绑定到 dom 节点。由于 SVG 我们能够制作图表，但 D3 远不止这些。您可以使用 D3 替换 Backbone、Angular 和 Ember 等框架。

不知道谁投了反对票，但让我更清楚一点。

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

另一方面，Jquery 的唯一目的是编写更少的代码。它只是一个简写版本的 javascript，已经在许多浏览器上进行了测试。如果您的网页上没有很多 jquery。这是一个很棒的图书馆。它很简单，并且为多个浏览器的 javascript 开发付出了很多努力。

如果您尝试以类似 d3 的方式实现 jquery，它会很慢，因为它不是为该任务而设计的，同样，d3 也不是为了将数据发布到服务器而设计的，它只是为了消费和呈现数据而设计的.

于 2014-08-19T13:24:07.173 回答
10

d3 是为数据可视化而设计的，它通过过滤 DOM 对象并应用转换来实现。

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

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

如果您希望移动、操作或以其他方式修改您的网页，jQuery 就是您的工具。

于 2012-11-01T23:39:22.653 回答
8

好问题！

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

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

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

于 2014-04-09T11:05:22.587 回答
1

两者都可以解决创建和操作 DOM（无论是 HTML 还是 SVG）的相同目的。D3 提供了一个 API，可简化您在基于数据生成/操作 DOM 时执行的常见任务。它通过 data() 函数对数据绑定的本机支持来做到这一点。在 jQuery 中，您必须手动处理数据并定义如何绑定到数据以生成 DOM。正因为如此，你的代码变得更加程序化，更难推理和遵循。使用 D3，它的步骤/代码更少，声明性更强。D3 还提供了一些更高级别的函数来帮助在 SVG 中生成数据可视化。range()、domain() 和 scale() 等函数可以更轻松地获取数据并将它们绘制在图表上。像 axis() 这样的函数还可以更轻松地绘制您期望在图表/图形中出现的常见 UI 元素。

于 2015-06-10T22:41:49.130 回答