参考这个例子：
http://vallandingham.me/stepper_steps.html
似乎 D3 和 jQuery 库非常相似，因为它们都以对象链接的方式进行 DOM 操作。
我很想知道 D3 使哪些函数比 jQuery 更容易，反之亦然。有大量使用 jQuery 作为基础的图形和可视化库（例如，highcharts、flot、wijmo）。
请举例说明它们有何不同。
【问题讨论】：
标签： highcharts flot wijmo javascript jquery d3.js
D3 是数据驱动的，但 jQuery 不是：使用 jQuery 您可以直接操作元素，但使用 D3 您可以提供数据和回调 em> 通过 D3 独特的 data()、enter() 和 exit() 方法和 D3 操作元素。
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();
【讨论】：
d3 有一个愚蠢的描述。 jQuery 和 d3 一点也不相似，你只是不要将它们用于相同的事情。
jQuery 的目的是进行一般的 dom 操作。它是一个通用的 JavaScript 工具包，可用于您可能想做的任何事情。
d3 的主要设计目的是让使用数据制作闪亮的图表变得容易。如果您想对数据进行图形可视化，您绝对应该使用它（或类似的东西，或基于它构建的东西）。
如果您想要一个通用的 JS 库来满足您所有的交互式表单需求，请考虑使用 jQuery 或 proto 或 mootools。如果你想要一些小东西，可以考虑 underscore.js。如果您想要依赖注入和可测试性的东西，请考虑使用 AngularJS。
来自维基百科的General comparison 指南。
我明白为什么有人会认为他们相似。它们使用类似的选择器语法——$('SELECTOR')，而 d3 是一个非常强大的工具，用于选择、过滤和操作 html 元素，尤其是在将这些操作链接在一起时。 d3 试图在其主页上通过声称自己是一个通用库来向您解释这一点，但事实是大多数人在他们想要制作图表时使用它。因为 d3 的学习曲线非常陡峭，所以将它用于您的平均 dom 操作是非常不寻常的。然而，它是一个比 jQuery 更通用的工具，通常人们在 d3 之上构建其他更具体的库（例如 nvd3），而不是直接使用它。
@JohnS 的回答也很好。 Fluent 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() 基本上是访问html 属性data-<custom-name> 的快捷方式。但在 D3 中，它与 html 数据属性无关，它在 D3 中所做的是返回一个新的选择，作为在 args 中传递的数据与已选择元素的连接。
D3 不仅仅是视觉图表。数据驱动的文档。使用 d3 时，会将数据绑定到 dom 节点。由于 SVG 我们能够制作图表，但 D3 远不止这些。您可以使用 D3 替换 Backbone、Angular 和 Ember 等框架。
不确定谁投了反对票，但让我更清楚一点。
许多网站从服务器请求数据，这些数据通常来自数据库。当网站收到这些数据时，我们必须对新内容进行页面更新。许多框架都这样做，d3 也这样做。因此，您可以使用 html 元素，而不是使用 svg 元素。当您调用重绘时，它会使用新内容快速更新页面。没有像 jquery、backbone + 它的插件、角度等所有额外的开销真是太好了。你只需要知道 d3。现在 d3 没有内置路由系统。但你总能找到一个。
另一方面，Jquery 的唯一目的是编写更少的代码。它只是一个简写版本的 javascript，已经在许多浏览器上进行了测试。如果您的网页上没有很多 jquery。这是一个很棒的图书馆。它很简单，并且为多个浏览器的 javascript 开发付出了很多努力。
如果您尝试以类似 d3 的方式实现 jquery，它会很慢，因为它不是为该任务而设计的，同样，d3 也不是为将数据发布到服务器而设计的，它只是为了消费而设计的并渲染数据。
【讨论】：
d3 是为数据可视化而设计的，它通过过滤 DOM 对象和应用转换来实现。
jQuery 专为 DOM 操作而设计，让许多基本 JS 任务的工作变得更轻松。
如果您希望将数据转换为漂亮的交互式图片，D3 非常棒。
如果您希望移动、操作或以其他方式修改您的网页，jQuery 是您的工具。
【讨论】：
好问题！
虽然两个库共享许多相同的功能，但在我看来，jQuery 和 D3 之间最大的区别在于焦点。
jQuery 是一个通用库，专注于跨浏览器和易于使用。
D3 专注于数据（操作和可视化），仅支持现代浏览器。虽然它看起来确实像 jQuery，但使用起来要困难得多。
【讨论】：
两者都可以解决创建和操作 DOM（无论是 HTML 还是 SVG）的相同目的。 D3 提供了一个 API，可简化您在基于数据生成/操作 DOM 时执行的常见任务。它通过 data() 函数对数据绑定的本机支持来做到这一点。在 jQuery 中，您必须手动处理数据并定义如何绑定到数据以生成 DOM。正因为如此，你的代码变得更加程序化，更难推理和遵循。使用 D3，步骤/代码更少，声明性更强。 D3 还提供了一些更高级别的函数来帮助在 SVG 中生成数据可视化。 range()、domain() 和 scale() 等函数可以更轻松地获取数据并将它们绘制在图表上。像 axis() 这样的函数还可以更轻松地绘制您在图表/图形中期望的常见 UI 元素。在 D3 之上还有许多其他更高级别的 api 库来帮助实现更复杂的数据可视化，包括交互行为和动画。
【讨论】：