在本文中,我们将探索最流行的JavaScript库,并讨论它们的优缺点。我们还将对一些鲜为人知的项目进行一些研究,这些项目可以满足一些非常有趣的利基需求——在你需要了解它们之前,你可能不知道自己需要的是哪个框架。

 

01. D3.js

D3.js是JavaScript图形库的老大。在npm上每周有超过一百万的下载量,它很可能是所有图形库中最广为人知和广泛使用的图形库。它甚至有自己的Wikipedia页面。事实上我们知道它,就是因为它已经很出名了。

D3使您能够建立任何类型的数据可视化。您只需要浏览其示例页面即可了解各种可能性。D3是无所不含的工具,它具有自己的DOM选择,AJAX功能以及专有的随机数生成器。D3的每个组件都是必须导入的其自己的Node模块。例如,选择模块称为d3选择。还有用于数组,形状,颜色,拖放,时间等的模块。

D3的强大功能伴随着复杂性的折衷。学习曲线可能很陡峭,并且代码仍然感觉很冗长。要构建像条形图一样简单的内容,您需要手动组装轴,比例,刻度线,甚至绘制代表条形的矩形。开发人员经常抱怨要对D3起作用才需要低水平的理解,这在很大程度上是因为创建复杂的数据可视化要求您对要创建的可视化有较低的了解。

D3能够渲染到画布和SVG,但是,D3的真正魅力在于其“数据绑定”到它生成的图形的能力。考虑一个随输入数据变化而变化的图表。使用SVG,每个图形项都是可以选择和更新的单独元素。对于画布而言,这是不可能的,并且由于D3从根本上讲就是为数据可视化提供动力,因此SVG通常是首选的输出格式。

 

02. Chart.js

Chart.js是一个开源项目,用于使用JavaScript构建复杂的图表。Chart.js和D3之间的最大区别是,尽管您可以使用D3构建几乎所有内容,但Chart.js将您限制为八种预先构建的图表类型:线形,条形,饼形,极坐标,气泡形,散点图,面积图和混合图。虽然这似乎有局限性,但这是使Chart.js入门更简单的原因。对于那些不是数据专家但了解基本图表的人而言,尤其如此。

语法全部围绕图表类型构建。您可以在现有画布元素上初始化新图表,设置图表类型,然后设置图表选项。Chart.js仅渲染到画布。这不是问题,因为所有现代浏览器都支持HTML canvas元素,但是对于需要SVG支持的开发人员来说,这可能是一个麻烦。

这也意味着您受限于可能的动画。开箱即用,Chart.js支持所有缓动方程,并且通过一个属性设置指定了动画。尽管可以轻松快捷地获取动画图表,但是没有单独的SVG元素会阻止您使用CSS3过渡和动画制作复杂的动画。

与D3不同,Chart.js不是模块化的,因此只需要包含一个JavaScript就可以支持所有功能和图表类型。这使上手更容易,但意味着您的资产可能更大。如果您需要时间轴,则尤其如此-Chart.js然后需要Moment.js,该文件必须缩小并压缩至约51kb。使用Chart.js创建条形图比使用D3创建条形图要容易得多。但是,简单性带来了天花板。您可能会发现自己达到了开箱即用的极限。通常,开发人员首先使用Chart.js之类的解决方案,然后再升级到D3。

如果Chart.js的简单性吸引您,那么您可能真的很喜欢下一个选择:Chartist。

 

03.Chartist

Chartist的目标是成为一个简单、精简的图表库,它体积小且易于上手。默认情况下,它也被设计为响应式的。这比听起来要大得多,因为D3之类的框架不会自动调整图表大小,而是要求开发人员绑定事件并重新绘制图形。

Chartist与Chart.js相比也很小。它只有10KB,零依赖项。那可能是因为它仅提供三种图表类型:折线图,条形图和饼图。这些类型之间存在差异(例如,散点图是Chartist中的线型),但是由于缺少现成的图表类型,因此无法实现微小的尺寸和易于配置的功能。

Chartist渲染为SVG而不是画布,从而使其在外观和感觉上更具可定制性,并提供了对交互性和动画的更多控制。但是,没有对画布的渲染访问权限意味着您可能很难进行某些操作。例如,有一个用于将画布渲染到图像的API(toDataURI)。SVG不存在该选项,因此将图表导出为图像将变得更加棘手。在理想的世界中,您可以选择同时渲染两种模式。

由于可用选项较少,因此Chartist图表比Chart.js易于配置。尽管可以用很多功能扩展这些图表,但它们对简单性的关注意味着从定义上讲它们是简单的。对于那些需要基本制图解决方案的人来说,Chartist是一个很好的解决方案。图表本质上很难配置,因为它们需要某种有关如何沿特定轴设置数据并以特定方式分组的知识。Chartist使制图部分尽可能简单,但是随着您更习惯于生成图表,您可能会发现自己需要更强大的解决方案。

Chartist还列出了开源框架支持,包括React和Angular。网站上没有提及Vue软件包。

 

04. Britecharts

Britecharts是包装D3的图表库。它是由Eventbrite制造的,然后根据许可的Apache V2许可证将项目开源。

它提供了非常少量但美观的图表集。用香草D3创建条形图虽然是一项艰巨的任务,但Britecharts的包装使其像创建一个新的barChart对象然后设置其宽度和高度一样简单。
Britecharts支持所有基本图表类型:折线图,条形图,甜甜圈图,项目符号,散点图,迷你图和阶梯图,这比Chartist等库所提供的要多。它还提供了基本的工具提示和图例功能。图表的动画是内置的,Eventbrite提供了一些漂亮的配色方案。

最终,Britecharts是基本图表功能的绝佳选择。配置对象非常简单,您仍然可以在不了解D3本身的情况下获得D3的强大功能。与简单地使用D3从头开始构建完整的图表相比,许多开发人员会发现此方法更具吸引力。

它还着重于D3的数据绑定方面,使其对于需要随基础数据变化而变化的图表非常有用。尽管在可用类型上有所限制,但它也具有基本图表类型,您可以扩展这些基本图表类型以创建自己的新图表类型。

 

05. Taucharts

Taucharts是另一种制图解决方案,它将D3的复杂性包装在易于实现的API中。它建立在作者Leland Wilkinson写的《图形语法》的概念上。它使您了解何时以及如何使用哪些数据可视化来显示不同种类的数据。

开箱即用,它具有折线图,条形图,散点图,面积图和构面图。但是,它将“图形语法”的概念实施为“ Taucharts语言”,该概念提供了一个框架,可以在其中实现您自己的数据可视化。

Taucharts看起来非常引人注目,而且它基于D3的事实使其成为有吸引力且功能强大的选择。但是,有一种感觉,开发人员还需要阅读《图形语法》以充分利用其功能。

到目前为止,我们仅涉及图表和数据可视化。这是因为绘制图表是浏览器中图形库的最常见用例。但这绝不是唯一的。当然,另一个非常常见的图形场景是动画。

 

06. Two.js

不要与D3.js混淆,two.js是一个开源JavaScript库,用于在网络上进行二维绘图。它还能够定位现代浏览器中的所有三个图形选项:SVG,Canvas和WebGL。

Two.js与D3有点相似,因为它严格专注于绘图,并且没有预烘焙的图表或交互式结构可供选择。这意味着,与D3一样,您需要对要尝试执行的图形类型以及如何使用two.js提供的构造实现基本了解。画一个圆很简单。另一方面,构建详细的动画是一项更为复杂的工作。Two.js仅抽象出图形形状的繁琐,而不是整个图形的繁琐。

Two.js还会跟踪您创建的所有对象,因此您可以随时对其进行引用和设置动画。如果您正在进行游戏开发,并且需要跟踪诸如碰撞检测之类的资产,那么这尤其重要。它具有内置的动画循环,使您不必担心动画帧,并使其更容易绑定到诸如GreenSock之类的动画库中。

尽管two.js功能强大,但其自由格式的特性可能使一些开发人员不确定如何开始,它更像是用于2D绘图和动画的利基工具。另一个出色的选择是pts.js。

 

07. Pts.js

Pts还是一个二维图形库。但是,它与two.js根本不同,因为它使用预定的方法来组装图形和动画:空间,形式和点。开发人员用来解释这一点的类比来自于物理世界。空间就是纸。形式是铅笔。重点是你的想法。

就其实现而言,空间是画布元素。创建canvas元素后,您可以向其添加播放器。这些可以是函数或对象。这些功能和对象必须符合空间具有的预定接口。Pts是基于TypeScript构建的,因此您无需猜测它们是什么,因为您使用的工具可能会建议那些具有自动完成功能的工具。

例如,空格具有您可以指定的开始功能。这是在空间准备就绪时运行的代码。在这些函数中,使用form对象对空间进行绘制。表单对象可以绘制任何形状,并且指向这些项目在空间中的位置。

Pts似乎主要用于创建交互式可视化和动画。它的实现很有趣,尽管很抽象。开发人员可能很难理解Pts所需的“空间,形式,点”模型。除了简单地绘制和设置形状动画之外,这是另一个必须克服的心理障碍。

 

08. Anime.js

Anime.js主要是一个动画库。它具有内置的交错系统,可以使重叠或依赖于另一个执行的复杂动画变得更加简单。动画通常会被定时或相互触发。交错系统使此操作更容易实现,因为它有助于减轻跟踪页面上发生的所有事情以及手动配置动画时间的一些开销。

与到目前为止介绍的图形库不同,anime.js没有用于图形绘制的API。相反,它假定您的形状已经存在,并且您希望对其进行动画处理。这非常适合与诸如two.js之类的库一起使用。Anime.js支持动画CSS属性,SVG,DOM甚至JavaScript对象。

Anime.js是使现有图形具有动画效果的不错选择,并且很可能与另一个库结合使用。应该将其视为GreenSock之类的替代品,而不是其他图形库的替代品。Anime.js可能会用于需要作为交互式Web体验的一部分发生的更复杂的动画。

 

09. PixiJS

PixiJS是另一个2D图形库。其主要目的是使显示,设置动画和管理2D图形更加容易,因此您可以专注于构建体验或游戏,而不必担心跟上必须绘制和设置动画的所有形状和图像。如果您要开发游戏,资产(或精灵)可能会迅速膨胀到难以管理的数量。(有多少资产需要保存?将它们保存在最可靠的云存储中。)

PixiJS的一个引人注目的方面是它来自在Adobe Flash中广泛构建和使用的API。对于使用Flash背景的开发人员来说,这是一个巨大的好处,因为您会感到熟悉。它也类似于Apple的SpriteKit。

PixiJS并非游戏引擎,因此,如果将其用于游戏,则不会找到任何工具或物理学来处理诸如碰撞检测之类的事情。如果您觉得自己很强悍,则需要将其包装在一个实际的游戏引擎中,或者将其包装在一个自己的游戏引擎中。

PixiJS渲染到WebGL。WebGL是用于在浏览器中执行GPU加速图形的引擎。这意味着它对于使用大量系统资源并且在由独立图形处理单元(GPU)渲染时表现最佳的动画和图形很有用。它基于OpenGL,Op​​enGL是运行游戏和3D图形程序的等效桌面。在引擎盖下,WebGL使用HTML canvas元素。

认真的图形开发人员将欣赏WebGL的强大功能。但是,这些经验在低功率机器上可能会降低。即使在我将本文放在一起时,许多PixiJS演示也会导致我的系统明显减速,该系统没有复杂图形和动画所需的高端功能。

 

10. Zdog

到目前为止,我们讨论的大多数绘图引擎都是二维的。这是因为与屏幕的大多数交互都发生在两个维度上–沿X和Y轴。三维绘图和动画通常要复杂得多。

Zdog是一个用于构建伪3D体验的库,其本质上几乎是平坦的。之所以称其为伪3D,是因为它在3D空间中将其概念图概念化时将其渲染为平面形状。它使用视觉技巧使2D对象显示为3D。效果真的很有趣。当观看动画时,它看起来完全是三维的,但是当截屏时,它显然是平面图像。这是一个示例:旋转的Mario演示。
由于渲染是2D的,因此Zdog可以渲染到Canvas或SVG。Zdog是用于在简单对象上进行3D动画的绝佳选择,尤其是当这些资产包含平面设计的方面时。想要3D动画但又不想陷入复杂的3D图形引擎世界的开发人员可能会发现Zdog是一个合适的解决方案。此外,由于专注于平面图像,与复杂图形图像的3D渲染相比,Zdog可以提供更简单的界面和更高的性能。

它没有游戏引擎的元素(例如资产管理和冲突检测),因此需要将其包装在游戏引擎中或手动考虑这些因素。这意味着Zdog可能最适合登陆页面上的独立3D动画。

 

11. Snap.svg

Snap.svg说,它使“使用SVG资产就像使用DOM一样容易”。您可能可以从jQuery参考中得知Snap.svg较旧,但是它的API确实和jQuery一样容易,而且功能非常强大。

Snap.svg具有干净简单的API,用于选择您的主要SVG元素,然后向其绘制元素。它最适合寻求为SVG动画制作快速解决方案的开发人员。如果您的动画很简单并且您对动画引擎没有很多知识,那么这是一个特别好的选择。尽管它有些过时,但它绝对不应被忽略,因为它可能是与SVG一起使用的最简单方法。

Snap.svg的简单性令人耳目一新。它仅适用于选择和使用SVG的工作,并且不仅仅局限于此。Snap可以与此处的其他图形库结合使用,以绘制和渲染到SVG。如果您有现有的SVG,并且想要一种简单的方法来使用它们,那也很好。