d3.js D3和jQuery之间有什么区别?

bwitn5fc  于 2022-11-12  发布在  jQuery
关注(0)|答案(7)|浏览(217)

参考此示例:
http://vallandingham.me/stepper_steps.html
看起来D3和jQuery库在都以对象链的方式进行DOM操作这一点上非常相似。
我很想知道D3使哪些函数比jQuery更容易,反之亦然。有很多图形和可视化库都使用jQuery作为基础(例如,highchartsflotwijmo)。
请给予具体的例子,说明它们之间的不同之处。

omqzjyyz

omqzjyyz1#

  • 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();
r7xajy2e

r7xajy2e2#

d3有一个愚蠢的描述。jQuery和d3一点也不相似,你只是没有用它们做同样的事情。
jQuery的目的是做一般的dom操作,它是一个通用的javascript工具包,可以做任何你想做的事情。
D3的主要设计目的是让数据更容易制作闪亮的图表。如果你想对数据进行图形可视化,你绝对应该使用它(或者类似的东西,或者构建在它上面的东西)。
如果你想要一个通用的JS库来满足你所有的交互式表单需求,可以考虑jQuery或者proto或者mootools。如果你想要一个小的,可以考虑underscore.js。如果你想要一个有依赖注入和可测试性的,可以考虑AngularJS。
来自维基百科的General comparison指南。
我可以理解为什么有人会认为它们是相似的。它们使用相似的选择器语法-- $('SELECTOR'),而d3是一个非常强大的工具,用于选择、过滤和操作html元素,特别是在将这些操作链接在一起时。d3试图在其主页上向您解释这一点,声称自己是一个通用库,但事实上大多数人都是在 * 制作图表 * 的时候使用它的,因为d3的学习曲线非常陡峭,所以将它用于一般的dom操作是很不寻常的,并且通常人们在D3之上构建其它更具体的库(诸如NVD 3)而不是直接使用它。
@JohnS的回答也很好。Fluent API =方法链接。我也同意插件和扩展将你带向库的方向。

ego6inou

ego6inou3#

我最近都用了一点,因为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"}
qfe3c7zg

qfe3c7zg4#

D3不仅仅是可视化的图形。数据驱动的文档。当你使用D3时,你把数据绑定到dom节点。因为SVG,我们能够制作图形,但是D3是如此的多。你可以用D3来替换像Backbone,Angular,和Ember这样的框架。
不知道谁投了反对票,但让我再澄清一下。
很多网站向服务器请求数据,这些数据通常来自一个数据库,当网站收到这些数据时,我们必须对新内容做一个页面更新,很多框架都是这样做的,d3也是这样做的,所以不用svg元素,你可以用html元素来代替,当你调用redraw时,它会用新的内容快速更新页面,没有像jquery、backbone +插件、angular你只需要知道d3。现在d3没有一个路由系统,但是你总是可以找到一个。
另一方面,Jquery的唯一目的是编写更少的代码。它只是javascript的一个简短版本,已经在许多浏览器上测试过了。如果你的网页上没有很多jquery,它是一个很好的库。它很简单,而且为多个浏览器的javascript开发带来了很多麻烦。
如果你试图以类似d3的方式实现jquery,它会非常慢,因为它不是为那个任务而设计的,同样,d3也不是为了向服务器发布数据而设计的,它只是为了消费和呈现数据而设计的。

kt06eoxx

kt06eoxx5#

d3是为数据可视化而设计的,它通过过滤DOM对象并应用转换来实现这一点。
jQuery是为DOM操作而设计的,它使许多基本的JS任务变得更加简单。
如果您希望将数据转换为漂亮的交互式图片,D3是非常棒的。
如果您希望移动、操作或以其他方式修改网页,jQuery是您的工具。

5m1hhzi4

5m1hhzi46#

问得好!
虽然这两个库共享许多相同的特性,但在我看来,jQuery和D3之间最大的区别是焦点。
jQuery是一个通用的库,其重点是跨浏览器和易于使用。
D3专注于数据(操作和可视化),只支持现代浏览器。虽然它看起来像jQuery,但使用起来要困难得多。

2wnc66cl

2wnc66cl7#

两者都可以实现创建和操作DOM的相同目的(无论是HTML还是SVG)。D3提供了一个API,它简化了基于数据生成/操作DOM时的常见任务。在jQuery中,您必须手动处理数据并定义如何绑定到数据以生成DOM。因此,你的代码变得更加程序化,更难推理和遵循。使用D3,它的步骤/代码更少,声明性更强。D3还提供了一些更高级别的函数,帮助在SVG中生成数据可视化。像range这样的函数()、网域(),以及缩放了()使获取数据并将其绘制在图形上变得更容易。()还可以更轻松地绘制图表/图形中常见的UI元素。级别API库,这些库位于D3之上,以帮助实现更复杂的数据可视化,包括交互行为和动画。

相关问题