D3.js与echart.js的应用场景

什么是D3？

D3.js的全称是Data-Driven Documents，其实就是一个数据驱动的文档的js库，简而言之就是一个数据可视化的库。那什么是数据可视化呢？举个例子：

给出一组数据 [10，80，40,100,30,20,50]

若是咱们想要看出这组数据的大小关系，单看数据显然不够直观。那么咱们能够将它转换为一种简单易懂的图表的形式（以下图）这样咱们就能够更加直观的获取数据所传递给咱们的信息。这个过程就叫作数据可视化。

在咱们平时的项目开发中常常会遇到这种状况：后端返回给咱们一组数据，前端人员须要把数据以一种很舒服、很直观的方式给别人展示出来，最好的选择就是经过图表，图表能够很直观的把庞大的数据以一种合适的方式展示给咱们。可是若是经过js,css去本身写出这些图表显然是很麻烦的。因此就有D3.js。

使用D3能够绘制图表能够大大的提高咱们的开发速度。并且使用起来比较灵活，换言之（想画什么就画什么）。D3是一种偏函数式编程的方式，这也是他比较复杂的地方，正由于他比较灵活，因此它所涉及的东西比较底层，学习成本就比较大。下面是一些D3.js绘制出的图例：

这些只是官网中的一小部分，感兴趣的同窗能够去官网看看。能够看出，使用D3绘制的图表看起来都很灵活。咱们在项目中使用的时候只须要将数据和相应的图表结合起来，就能够将图表渲染在页面上了。

什么是echarts?

顾名思义echarts其实也是一个数据可视化的工具，它和D3的做用很相似。echarts是封装好的，因此咱们使用起来很方便，只用填写他的配置项就可使用，但也偏偏由于它被封装好的缘故，因此灵活性较差，咱们只能修改它所存在的配置项，若是想要本身添加或修改配置项中不存在的东西是不能够的。下面试echarts的一些图表示例：

echarts和D3的区别

既然echarts和D3的做用类似，那他们有什么不一样之处呢？我以为他们之间最大的不一样之处就在于echarts它是使用canvas来绘制图形的，而D3是经过Svg来绘制图形的。这二者的不一样之处在于，svg能够操做dom支持事件处理器，想要实现某个操做，直接调用相关的方法实现效果就行，他那个里面存在链式语法，这个和jQuery的链式调用差很少，简单易读。canvas不支持事件处理器因此只能展现数据，而不能修改。

• D3使用svg绘制图形，echarts使用canvas绘制图形
• D3兼容IE9及以上主流浏览器，echarts兼容IE6及以上主流浏览器
• D3使用灵活，学习成本大，echarts封装好的，使用简单，不够灵活

D3与echart的适用场景

由于D3支持事件处理器能够操做dom，因此若是在项目开发中若是有较多用户交互的场景，可使用D3.若是项目中通常没有用户交互的场景，咱们只须要将图表展现给用户看，而不须要更改，可使用echarts。由于D3它展现的每个数据都是一个标签，因此当数据发生改变的时候图表会从新渲染，会不停的操做dom，这对性能的消耗是很是大的。

这里只是简单的介绍一下echarts和D3，感兴趣的同窗能够去官网查看具体使用方法，官网上都介绍的很是详细，有时间也能够本身实践一下，也会有很大的收获，并且用echarts和D3开发的项目看起来会比较高大上一点~