Referring to this example:
指的是这个例子:
http://vallandingham.me/stepper_steps.html
http://vallandingham.me/stepper_steps.html
it seems that the D3 and jQuery libraries are very similar in the sense that they both do DOM manipulation in an object-chaining way.
看起来D3和jQuery库非常相似，它们都以对象链接的方式进行DOM操作。
I'm curious as to know what functions D3 makes easier than jQuery and vice versa. There are plenty of graphing and visualization libraries that use jQuery as a basis (e.g., highcharts, flot, wijmo).
我很想知道D3的功能比jQuery更容易，反之亦然。有大量的图形化和可视化库使用jQuery作为基础(例如，highcharts, flot, wijmo)。
Please give specific examples of how they are different.
请举例说明它们有何不同。
7 个解决方案
#1
75
-
D3 is data-driven but jQuery is not: with jQuery you directly manipulate elements, but with D3 you provide data and callbacks through D3's unique
data(),enter()andexit()methods and D3 manipulates elements.D3是数据驱动的，但jQuery不是:使用jQuery可以直接操作元素，但是使用D3可以通过D3的unique data()、enter()和exit()方法提供数据和回调，D3可以操作元素。
-
D3 is usually used for data visualization but jQuery is used for creating web apps. D3 has many data visualization extensions and jQuery has many web app plugins.
D3通常用于数据可视化，但jQuery用于创建web应用程序。D3有许多数据可视化扩展，jQuery有许多web应用程序插件。
-
Both are JavaScript DOM manipulation libraries, have CSS selectors and fluent API and are based on web standards which makes them look similar.
它们都是JavaScript DOM操作库，具有CSS选择器和fluent API，并且基于web标准，这使得它们看起来很相似。
Following code is an example of D3 usage which is not possible with jQuery (try it in jsfiddle):
下面的代码是一个使用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();
#2
54
d3 has a silly description. jQuery and d3 are not at all similar, you just don't use them for the same things.
d3有一个愚蠢的描述。jQuery和d3一点都不相似，只是在相同的事情上不使用它们。
jQuery's purpose is to do general dom manipulation. It's a general purpose javascript toolkit for anything you might want to do.
jQuery的目的是进行一般的dom操作。它是一个通用的javascript工具包，用于您可能想要做的任何事情。
d3 was primarily designed to make it easy to make shiny graphs with data. You should definitely use it (or something similar, or something built on top of it) if you want to make graphical visualizations of data.
d3最初的设计目的是为了使用数据制作闪亮的图形更加容易。如果你想要对数据进行图形化的可视化，你一定要使用它(或者类似的东西，或者在它上面构建的东西)。
If you want a general purpose JS library for all your interactive form needs, consider jQuery or proto or mootools. If you want something tiny, consider underscore.js. If you want something with dependency injection and testability, consider AngularJS.
如果您想要一个通用的JS库来满足所有交互表单的需求，可以考虑jQuery或proto或mootools。如果你想要一些很小的东西，可以考虑下。如果您希望使用依赖注入和可测试性，请考虑AngularJS。
A General comparison guide from wikipedia.
*上的一个比较指南。
I can see why someone would think they are similar. They use a similar selector syntax -- $('SELECTOR'), and d3 is an extremely powerful tool for selecting, filtering, and operating on html elements, especially while chaining these operations together. d3 tries to explain this to you on its home page by claiming to be a general purpose library, but the fact is that most people use it when they want to make graphs. It is pretty unusual to use it for your average dom manipulation because the d3 learning curve is so steep. It is, however, a far more general tool than jQuery, and generally people build other more specific libraries (such as nvd3) on top of d3 rather than using it directly.
我明白为什么有人会认为他们是相似的。它们使用类似的选择器语法——$(' selector ')， d3是一个非常强大的工具，用于选择、过滤和操作html元素，尤其是在将这些操作链接在一起时。d3试图在其主页上向您解释这一点，声称它是一个通用库，但事实是，大多数人在想要创建图形时都使用它。将它用于一般的dom操作是非常不寻常的，因为d3学习曲线非常陡峭。但是，它是一个比jQuery更通用的工具，通常人们在d3之上构建其他更特定的库(比如nvd3)，而不是直接使用它。
@JohnS's answer is also very good. Fluent API = method chaining. I also agree about where the plugins and extension lead you with the libraries.
约翰的回答也很好。连贯API =方法链接。我还同意插件和扩展在哪些方面引导您使用库。
#3
12
I've been using a little of both lately. Since d3 uses Sizzle's selectors you can pretty much mix up selectors.
我最近都用了一点。由于d3使用了Sizzle的选择器，您几乎可以混合选择器。
Just keep in mind d3.select('#mydiv') doesn't return quite the same as jQuery('#mydiv'). It's the same DOM element, but it's being instantiated with different constructors. For example, let's say you have the following element:
请记住，d3.select('# div mydiv')返回的jQuery('#mydiv')并不完全相同。它是相同的DOM元素，但是用不同的构造函数实例化它。例如，假设您有以下元素:
<div id="mydiv" rel="awesome div" data-hash="654687867asaj"/>
And let's grab some common methods:
让我们找出一些常用的方法:
> d3.select('#mydiv').attr('rel') ;
"awesome div"
> jQuery('#mydiv').attr('rel');
"awesome div"
Seems legit. But if you go a little further:
似乎是合法的。但是如果你再深入一点:
> d3.select('#mydiv').data();
[undefined]
> jQuery('#mydiv').data();
Object {hash: "654687867asaj"}
#4
11
d3 is made for data visualization, it does this by filtering through DOM objects and applying transformations.
d3用于数据可视化，它通过过滤DOM对象并应用转换来实现这一点。
jQuery is made for DOM manipulation and making life easier for many basic JS tasks.
jQuery是为DOM操作而创建的，它使许多基本的JS任务变得更加轻松。
If you're looking to turn data into pretty, interactive pictures, D3 is awesome.
如果你想把数据变成漂亮的交互式图片，D3是很棒的。
If you're looking to move, manipulate or otherwise modify your webpage, jQuery is your tool.
如果你想移动、操作或修改你的网页，jQuery是你的工具。
#5
8
Great question!
好问题!
While both libraries share many of the same features, it seems to me that the greatest difference between jQuery and D3 is the focus.
虽然这两个库都有许多相同的特性，但在我看来，jQuery和D3之间最大的区别是焦点。
jQuery is a general purpose library with a focus on being cross-browser and being easy to use.
jQuery是一个通用的库，它的重点是跨浏览器和易于使用。
D3 is focused on data (manipulation and visualisation) and supports only modern browsers. And while it does look like jQuery, it's a lot more difficult to use.
D3专注于数据(操作和可视化)，只支持现代浏览器。虽然它看起来确实像jQuery，但使用起来要困难得多。
#6
7
D3 is not just about visual graphs. Data Driven Documents. When you use d3, you bind data to dom nodes. Because of SVG we are able to make graphs, but D3 is so much more. You can replace frameworks like Backbone, Angular, and Ember with using D3.
D3不仅仅是视觉图形。数据驱动文件。使用d3时，将数据绑定到dom节点。因为SVG，我们可以制作图形，但是D3要多得多。可以使用D3替换主干框架、角框架和烬框架。
Not sure who down voted, but let me add some more clarity.
不知道谁投了反对票，但让我再解释一下。
Many websites request data from the server, which usually comes from a database. When the website receives this data, we have to do a page update of the new content. Many frameworks do this, and d3 does this as well. So instead of using a svg element, you can use html element instead. When you call the redraw, it'll quickly update the page with the new content. It's real nice to not have all the extra overhead like jquery, backbone + its plugins, angular, etc. You only need to know d3. Now d3 doesn't have a routing system baked into it. But you can always find one.
许多网站从服务器请求数据，通常来自数据库。当网站接收到这些数据时，我们必须对新内容进行页面更新。许多框架都这样做，d3也这样做。因此，您可以使用html元素而不是svg元素。当您调用重绘时，它将使用新内容快速更新页面。没有jquery、主干+插件、角等额外开销是非常好的。您只需要知道d3就可以了。d3没有内置路由系统。但你总能找到一个。
Jquery on the other hand, it's sole purpose is to write less code. It's just a short hand version of javascript that has been tested on many browsers. If you don't have a lot of jquery on your webpage. It's a great library to use. It's simple and takes a lotta pains out of javascript development for multiple browsers.
另一方面，Jquery的唯一目的是编写更少的代码。它只是javascript的一个简短版本，已经在许多浏览器上进行了测试。如果你的网页上没有很多jquery的话。这是一个很好的图书馆。它很简单，并且在javascript开发中为多种浏览器付出了很多努力。
If you tried to implement jquery in a d3 like fashion, it'll be quite slow, as it wasn't designed for that task, likewise, d3 isn't design to post data to servers, it's designed just to consume and render data.
如果您试图以d3之类的方式实现jquery，它将会非常缓慢，因为它不是为该任务设计的，同样，d3也不是设计为将数据发布到服务器，而是设计为只使用和呈现数据。
#7
1
Both can solve the same purpose of creating and manipulating a DOM (whether it be HTML or SVG). D3 surfaces an API that simplifies common tasks you would take when generating/manipulating a DOM based on data. It does this through it's native support for data binding via the data() function. In jQuery you would have to manually process the data and define how to bind to the data in order to generate a DOM. Because of this, your code becomes more procedural and harder to reason and follow. With D3, it's less steps/code and more declarative. D3 also provides some higher level functions that aid in generating data visualization in SVG. Functions like range(),domain(), and scale() make it easier to take data and plot them on a graph. Functions like axis() also make it easier to draw common UI elements you would expect in a chart/graph. There are many other higher-level api libraries that sit on top of D3 to aid in more complex visualizations of data including interactive behavior and animation.
两者都可以解决创建和操作DOM的相同目的(不管是HTML还是SVG)。D3提供了一个API，可以简化基于数据生成/操作DOM时要执行的常见任务。它通过数据()函数对数据绑定的本机支持来实现这一点。在jQuery中，您必须手动处理数据并定义如何绑定到数据以生成DOM。正因为如此，您的代码变得更程序化，更难推理和遵循。对于D3，它的步骤/代码更少，更具有声明性。D3还提供了一些高级函数，帮助在SVG中生成数据可视化。像range()、domain()和scale()这样的函数可以更容易地获取数据并将它们绘制到图中。像axis()这样的函数还可以更容易地绘制图表/图表中常见的UI元素。还有许多其他高级api库位于D3之上，以帮助实现更复杂的数据可视化，包括交互行为和动画。
#1
75
-
D3 is data-driven but jQuery is not: with jQuery you directly manipulate elements, but with D3 you provide data and callbacks through D3's unique
data(),enter()andexit()methods and D3 manipulates elements.D3是数据驱动的，但jQuery不是:使用jQuery可以直接操作元素，但是使用D3可以通过D3的unique data()、enter()和exit()方法提供数据和回调，D3可以操作元素。
-
D3 is usually used for data visualization but jQuery is used for creating web apps. D3 has many data visualization extensions and jQuery has many web app plugins.
D3通常用于数据可视化，但jQuery用于创建web应用程序。D3有许多数据可视化扩展，jQuery有许多web应用程序插件。
-
Both are JavaScript DOM manipulation libraries, have CSS selectors and fluent API and are based on web standards which makes them look similar.
它们都是JavaScript DOM操作库，具有CSS选择器和fluent API，并且基于web标准，这使得它们看起来很相似。
Following code is an example of D3 usage which is not possible with jQuery (try it in jsfiddle):
下面的代码是一个使用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();
#2
54
d3 has a silly description. jQuery and d3 are not at all similar, you just don't use them for the same things.
d3有一个愚蠢的描述。jQuery和d3一点都不相似，只是在相同的事情上不使用它们。
jQuery's purpose is to do general dom manipulation. It's a general purpose javascript toolkit for anything you might want to do.
jQuery的目的是进行一般的dom操作。它是一个通用的javascript工具包，用于您可能想要做的任何事情。
d3 was primarily designed to make it easy to make shiny graphs with data. You should definitely use it (or something similar, or something built on top of it) if you want to make graphical visualizations of data.
d3最初的设计目的是为了使用数据制作闪亮的图形更加容易。如果你想要对数据进行图形化的可视化，你一定要使用它(或者类似的东西，或者在它上面构建的东西)。
If you want a general purpose JS library for all your interactive form needs, consider jQuery or proto or mootools. If you want something tiny, consider underscore.js. If you want something with dependency injection and testability, consider AngularJS.
如果您想要一个通用的JS库来满足所有交互表单的需求，可以考虑jQuery或proto或mootools。如果你想要一些很小的东西，可以考虑下。如果您希望使用依赖注入和可测试性，请考虑AngularJS。
A General comparison guide from wikipedia.
*上的一个比较指南。
I can see why someone would think they are similar. They use a similar selector syntax -- $('SELECTOR'), and d3 is an extremely powerful tool for selecting, filtering, and operating on html elements, especially while chaining these operations together. d3 tries to explain this to you on its home page by claiming to be a general purpose library, but the fact is that most people use it when they want to make graphs. It is pretty unusual to use it for your average dom manipulation because the d3 learning curve is so steep. It is, however, a far more general tool than jQuery, and generally people build other more specific libraries (such as nvd3) on top of d3 rather than using it directly.
我明白为什么有人会认为他们是相似的。它们使用类似的选择器语法——$(' selector ')， d3是一个非常强大的工具，用于选择、过滤和操作html元素，尤其是在将这些操作链接在一起时。d3试图在其主页上向您解释这一点，声称它是一个通用库，但事实是，大多数人在想要创建图形时都使用它。将它用于一般的dom操作是非常不寻常的，因为d3学习曲线非常陡峭。但是，它是一个比jQuery更通用的工具，通常人们在d3之上构建其他更特定的库(比如nvd3)，而不是直接使用它。
@JohnS's answer is also very good. Fluent API = method chaining. I also agree about where the plugins and extension lead you with the libraries.
约翰的回答也很好。连贯API =方法链接。我还同意插件和扩展在哪些方面引导您使用库。
#3
12
I've been using a little of both lately. Since d3 uses Sizzle's selectors you can pretty much mix up selectors.
我最近都用了一点。由于d3使用了Sizzle的选择器，您几乎可以混合选择器。
Just keep in mind d3.select('#mydiv') doesn't return quite the same as jQuery('#mydiv'). It's the same DOM element, but it's being instantiated with different constructors. For example, let's say you have the following element:
请记住，d3.select('# div mydiv')返回的jQuery('#mydiv')并不完全相同。它是相同的DOM元素，但是用不同的构造函数实例化它。例如，假设您有以下元素:
<div id="mydiv" rel="awesome div" data-hash="654687867asaj"/>
And let's grab some common methods:
让我们找出一些常用的方法:
> d3.select('#mydiv').attr('rel') ;
"awesome div"
> jQuery('#mydiv').attr('rel');
"awesome div"
Seems legit. But if you go a little further:
似乎是合法的。但是如果你再深入一点:
> d3.select('#mydiv').data();
[undefined]
> jQuery('#mydiv').data();
Object {hash: "654687867asaj"}
#4
11
d3 is made for data visualization, it does this by filtering through DOM objects and applying transformations.
d3用于数据可视化，它通过过滤DOM对象并应用转换来实现这一点。
jQuery is made for DOM manipulation and making life easier for many basic JS tasks.
jQuery是为DOM操作而创建的，它使许多基本的JS任务变得更加轻松。
If you're looking to turn data into pretty, interactive pictures, D3 is awesome.
如果你想把数据变成漂亮的交互式图片，D3是很棒的。
If you're looking to move, manipulate or otherwise modify your webpage, jQuery is your tool.
如果你想移动、操作或修改你的网页，jQuery是你的工具。
#5
8
Great question!
好问题!
While both libraries share many of the same features, it seems to me that the greatest difference between jQuery and D3 is the focus.
虽然这两个库都有许多相同的特性，但在我看来，jQuery和D3之间最大的区别是焦点。
jQuery is a general purpose library with a focus on being cross-browser and being easy to use.
jQuery是一个通用的库，它的重点是跨浏览器和易于使用。
D3 is focused on data (manipulation and visualisation) and supports only modern browsers. And while it does look like jQuery, it's a lot more difficult to use.
D3专注于数据(操作和可视化)，只支持现代浏览器。虽然它看起来确实像jQuery，但使用起来要困难得多。
#6
7
D3 is not just about visual graphs. Data Driven Documents. When you use d3, you bind data to dom nodes. Because of SVG we are able to make graphs, but D3 is so much more. You can replace frameworks like Backbone, Angular, and Ember with using D3.
D3不仅仅是视觉图形。数据驱动文件。使用d3时，将数据绑定到dom节点。因为SVG，我们可以制作图形，但是D3要多得多。可以使用D3替换主干框架、角框架和烬框架。
Not sure who down voted, but let me add some more clarity.
不知道谁投了反对票，但让我再解释一下。
Many websites request data from the server, which usually comes from a database. When the website receives this data, we have to do a page update of the new content. Many frameworks do this, and d3 does this as well. So instead of using a svg element, you can use html element instead. When you call the redraw, it'll quickly update the page with the new content. It's real nice to not have all the extra overhead like jquery, backbone + its plugins, angular, etc. You only need to know d3. Now d3 doesn't have a routing system baked into it. But you can always find one.
许多网站从服务器请求数据，通常来自数据库。当网站接收到这些数据时，我们必须对新内容进行页面更新。许多框架都这样做，d3也这样做。因此，您可以使用html元素而不是svg元素。当您调用重绘时，它将使用新内容快速更新页面。没有jquery、主干+插件、角等额外开销是非常好的。您只需要知道d3就可以了。d3没有内置路由系统。但你总能找到一个。
Jquery on the other hand, it's sole purpose is to write less code. It's just a short hand version of javascript that has been tested on many browsers. If you don't have a lot of jquery on your webpage. It's a great library to use. It's simple and takes a lotta pains out of javascript development for multiple browsers.
另一方面，Jquery的唯一目的是编写更少的代码。它只是javascript的一个简短版本，已经在许多浏览器上进行了测试。如果你的网页上没有很多jquery的话。这是一个很好的图书馆。它很简单，并且在javascript开发中为多种浏览器付出了很多努力。
If you tried to implement jquery in a d3 like fashion, it'll be quite slow, as it wasn't designed for that task, likewise, d3 isn't design to post data to servers, it's designed just to consume and render data.
如果您试图以d3之类的方式实现jquery，它将会非常缓慢，因为它不是为该任务设计的，同样，d3也不是设计为将数据发布到服务器，而是设计为只使用和呈现数据。
#7
1
Both can solve the same purpose of creating and manipulating a DOM (whether it be HTML or SVG). D3 surfaces an API that simplifies common tasks you would take when generating/manipulating a DOM based on data. It does this through it's native support for data binding via the data() function. In jQuery you would have to manually process the data and define how to bind to the data in order to generate a DOM. Because of this, your code becomes more procedural and harder to reason and follow. With D3, it's less steps/code and more declarative. D3 also provides some higher level functions that aid in generating data visualization in SVG. Functions like range(),domain(), and scale() make it easier to take data and plot them on a graph. Functions like axis() also make it easier to draw common UI elements you would expect in a chart/graph. There are many other higher-level api libraries that sit on top of D3 to aid in more complex visualizations of data including interactive behavior and animation.
两者都可以解决创建和操作DOM的相同目的(不管是HTML还是SVG)。D3提供了一个API，可以简化基于数据生成/操作DOM时要执行的常见任务。它通过数据()函数对数据绑定的本机支持来实现这一点。在jQuery中，您必须手动处理数据并定义如何绑定到数据以生成DOM。正因为如此，您的代码变得更程序化，更难推理和遵循。对于D3，它的步骤/代码更少，更具有声明性。D3还提供了一些高级函数，帮助在SVG中生成数据可视化。像range()、domain()和scale()这样的函数可以更容易地获取数据并将它们绘制到图中。像axis()这样的函数还可以更容易地绘制图表/图表中常见的UI元素。还有许多其他高级api库位于D3之上，以帮助实现更复杂的数据可视化，包括交互行为和动画。