参考此示例:
http://vallandingham.me/stepper_steps.html
看起来D3和jQuery库在都以对象链的方式进行DOM操作这一点上非常相似。
我很想知道D3使哪些函数比jQuery更容易,反之亦然。有很多图形和可视化库都使用jQuery作为基础(例如,highcharts,flot,wijmo)。
请给予具体的例子,说明它们之间的不同之处。
参考此示例:
http://vallandingham.me/stepper_steps.html
看起来D3和jQuery库在都以对象链的方式进行DOM操作这一点上非常相似。
我很想知道D3使哪些函数比jQuery更容易,反之亦然。有很多图形和可视化库都使用jQuery作为基础(例如,highcharts,flot,wijmo)。
请给予具体的例子,说明它们之间的不同之处。
7条答案
按热度按时间omqzjyyz1#
data()
、enter()
和exit()
方法提供数据和回调 *,D3操作元素。以下代码是一个使用D3的示例,这在jQuery中是不可能的(在jsfiddle中尝试):
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 =方法链接。我也同意插件和扩展将你带向库的方向。
ego6inou3#
我最近都用了一点,因为d3用的是Sizzle的选择器,所以你可以把选择器混在一起。
请记住,d3.select('# mydiv')返回的结果与jQuery('# mydiv')不同,它是相同的DOM元素,但用不同的构造函数示例化。例如,假设您有以下元素:
让我们来看看一些常见的方法:
看起来是合法的。但如果你再深入一点:
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也不是为了向服务器发布数据而设计的,它只是为了消费和呈现数据而设计的。
kt06eoxx5#
d3是为数据可视化而设计的,它通过过滤DOM对象并应用转换来实现这一点。
jQuery是为DOM操作而设计的,它使许多基本的JS任务变得更加简单。
如果您希望将数据转换为漂亮的交互式图片,D3是非常棒的。
如果您希望移动、操作或以其他方式修改网页,jQuery是您的工具。
5m1hhzi46#
问得好!
虽然这两个库共享许多相同的特性,但在我看来,jQuery和D3之间最大的区别是焦点。
jQuery是一个通用的库,其重点是跨浏览器和易于使用。
D3专注于数据(操作和可视化),只支持现代浏览器。虽然它看起来像jQuery,但使用起来要困难得多。
2wnc66cl7#
两者都可以实现创建和操作DOM的相同目的(无论是HTML还是SVG)。D3提供了一个API,它简化了基于数据生成/操作DOM时的常见任务。在jQuery中,您必须手动处理数据并定义如何绑定到数据以生成DOM。因此,你的代码变得更加程序化,更难推理和遵循。使用D3,它的步骤/代码更少,声明性更强。D3还提供了一些更高级别的函数,帮助在SVG中生成数据可视化。像range这样的函数()、网域(),以及缩放了()使获取数据并将其绘制在图形上变得更容易。()还可以更轻松地绘制图表/图形中常见的UI元素。级别API库,这些库位于D3之上,以帮助实现更复杂的数据可视化,包括交互行为和动画。