【问题标题】:What is the difference between D3 and jQuery?D3 和​​ jQuery 有什么区别?
【发布时间】:2012-10-22 15:11:19
【问题描述】:

参考这个例子:

http://vallandingham.me/stepper_steps.html

似乎 D3 和 jQuery 库非常相似,因为它们都以对象链接的方式进行 DOM 操作。

我很想知道 D3 使哪些函数比 jQuery 更容易,反之亦然。有大量使用 jQuery 作为基础的图形和可视化库(例如,)。

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

【问题讨论】:

    标签: highcharts flot wijmo javascript jquery d3.js


    【解决方案1】:
    • 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();
    

    【讨论】:

    • 很好,一个例子胜过一千字
    【解决方案2】:

    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 = 方法链。我也同意插件和扩展将您带入库的位置。

    【讨论】:

    • @zcaudate,d3 不在链接上,因为它非常专业。该链接仅比较一般框架。
    • 我要补充的另一件事是 D3 创建了一个 SVG(可缩放矢量图形)。这很棒,因为事物可以很容易地改变大小并且很容易与其他元素保持成比例。尽管您可以在 JQuery 中完成相同的事情(如 OP 的示例链接中所示),但它们并不意味着相互替换。
    • 它们的相似之处在于它们都在 Sizzle 上运行并使用相同的选择器(每个框架的很大一部分)。然而,在选择之后,它们构造了非常不同的 DOM 操作对象。
    • +1 表示愚蠢的描述。我研究了很多客户端库和组件,但在完全迷失之前,我没有通过他们网站上的第一句话。我点击了“事物”的花哨的深奥六边形马赛克,它把我带到了一个神秘而无关的地方。由于我无法理解这里发生了什么,我认为我不配加入 d3 俱乐部。因此,我将减少,并进入西方,并保持 d3-less。
    【解决方案3】:

    我最近一直在使用这两种方法。由于 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"}
    

    【讨论】:

    • 啊哈,想知道为什么 d3 中的 .data() 不像在 jquery 中那样工作。在 D3 中,必须设置 .attr('data-hash', '654687867asaj')
    • 这是一个不好的比较。 jQuery 中的.data() 基本上是访问html 属性data-&lt;custom-name&gt; 的快捷方式。但在 D3 中,它与 html 数据属性无关,它在 D3 中所做的是返回一个新的选择,作为在 args 中传递的数据与已选择元素的连接。
    • 现在这是一个糟糕的比较,但截至 2013 年还没有那么糟糕。从那时起,jQuery 为旧版浏览器放弃了大量的 polyfill(数据属性就是其中之一),而 D3 不再是一个单体库,而是成为一系列较小的特定库的入口点
    【解决方案4】:

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

    不确定谁投了反对票,但让我更清楚一点。

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

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

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

    【讨论】:

    • "...用 D3 替换 Backbone、Angular 和 Ember 等框架。"能详细点吗?
    • 根据我的经验,我看到很多人使用这些框架来渲染图表和图形,而您可以将它们替换为 d3。如果愿意,他们还可以在页面上使用 d3 渲染数据,因为它将数据绑定到元素。 D3 可以比 jQuery 更快地处理大型数据集。
    • 不确定谁对我投了反对票,但我希望他们能发表评论。 D3 用于数据驱动的文档。不仅仅是图表。
    • 您可以使用 d3 轻松构建可重用组件。 bost.ocks.org/mike/chart
    • 并不天真,我只使用 d3 和 websockets 作为我工作的内部工具。 D3 处理从 websocket 检索到的数据的数据绑定。我还使用 d3 来管理几个不同的视图。这是它自己的SPA。 D3 可以处理 html 元素以及 svg 元素。你不应该低估程序员。这就是为什么网络对我来说很美,有很多方法可以做同样的事情。只需选择您最喜欢的方式,它就会很有趣。
    【解决方案5】:

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

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

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

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

    【讨论】:

      【解决方案6】:

      好问题!

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

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

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

      【讨论】:

      • jquery 遵循 write less do more 方法,d3 专注于将数据呈现给文档元素。 d3 更难的原因有几个,一是它使用原始 javascript,二是更改了一些原始 javascript。例如:Javascript forEach(value, index, array), in d3 forEach(index, value, array)。我不确定他们为什么要反转函数参数,就像我在源代码中看到的那样。我认为如果我们取消无意义的功能,我们可以让 d3 更快。
      【解决方案7】:

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2010-12-19
        • 2013-05-22
        • 1970-01-01
        • 2012-07-12
        • 2013-01-27
        • 2017-08-18
        • 2013-06-08
        相关资源
        最近更新 更多