d3与echarts的区别

1. 目前各大公司的大数据平台多使用d3仍是echarts？何时适合用echarts，何时适合用d3?

在我看几种数据可视化平台多使用折线图，面积图和柱状图，条图居多，对于echarts和d3都有使用。 对于使用d3仍是echarts还得从用户需求，计算数据的量的大小来进行分析：

(1) 对于客户需求要求的图表拥有大量的用户交互场景，用d3比较方便，由于d3中svg画图支持事件处理器，他是基于dom进行操做的。想要实现某个操做，直接调用相关的方法实现效果就行，他那个里面存在链式语法，这个和jQuery的链式调用差很少，简单易读。

(2) 对于大量的数据展现而且对于用户交互场景没什么要求，就只是展现数据，那我建议使用echarts，若是使用d3的话展现的每个数据都是一个标签，那么当数据发生改变的时候这时候图表会从新渲染，会不停的操做dom，操做dom是很耗费性能的。

(3) 从兼容性方面考虑：echarts兼容到IE6及以上的全部主流浏览器，而d3兼容IE9及以上以及全部的主流浏览器，若是项目考虑兼容IE6，建议使用echarts。

2. D3和echarts的区别？

D3：

     太底层，学习成本大

兼容到IE9以上以及全部的主流浏览器

D3经过svg来绘制图形

能够自定义事件

Svg：

不依赖分辨率

基于xml绘制图形，能够操做dom

支持事件处理器

复杂度高，会减慢页面的渲染速度

Echarts：

        封装好的方法直接调用

兼容到ie6以及以上的全部主流浏览器

echarts经过canvas来绘制图形

封装好的，直接用，不能修改

Canvas：

依赖分辨率

基于js绘制图形

不支持事件处理器

能以png或者jpg的格式保存图片

3. 通常的交互都用在哪些方面上？

通常的数据交互，后台返回数据，前端将数据经过图表的形式展现给用户。对于这种只是展现数据的话我比较经常使用的是echarts

而像一些鼠标、键盘、触屏事件操做的话，是用d3实现的。由于svg支持事件处理器

                          当某个事件被监听到时，d3会把当前的事件存到d3.event对象，里面保存了当前事件的各类参数。

 

 

4. 不一样图表之间的对比：

 

柱状图（经常使用）

二维数据集，有一维须要比较，适合中小规模数据集，不超过12条数据

对比分类数据的数值大小

柱图用高度反映数据差别，用来展现有多少项目（频率）会落入一个具备必定特征的数据段中，好比分析公司人员构成是否存在老龄化现象，能够经过柱图看到25岁如下的员工有多少，25岁到35岁之间员工有多少等这种年龄的分布状况。同时，柱图还能够用来表示含有较少数据值的趋势变化关系。

条形图主要是用于观测进程,分类比较，柱形图按照必定的区间将数据进行分组。其操做方法基本类似

 

条图

 

 

条图表达比较关系，按照强调的方式能够排列任何顺序，如在零售行业中统计畅销品的销售状况就是很好的应用。它是最通用的一种图表

折线图（经常使用）

二维数据集，适合大量的数据展现，不注重数据的具体大小，注重在某一个时间段的数据的变化趋势

观察数据的变化趋势

关心数据如何随着时间变化而变化，每周、每个月、每一年的变化趋势是增加、减小、上下波动或基本不变，这时候使用线图更好地表现指标随时间呈现的趋势

 

面积图（经常使用）

二维数据集

在折线图的基础上，进行运用

 

与折线图较为相似，面积图强调变量随时间而变化的程度，也可用于引发人们对总值趋势的注意。用填充了颜色或图案的面积来显示数据，面积片数不宜超过5片

 

饼图（经常使用）

 

对比分类数据的占比状况

构成比例关系时，最好使用饼图

若是你想表达的信息包括：“份额”、“百分比”以及“预计将达到百分之多少”，这时候能够用到饼图。为了使饼图尽可能发挥做用，在使用中不宜多于6种成分。

 

 

 

 

气泡图（少用）

 

 

三维数据集

 

经过每一个点的面积大小，以及位置坐标来展现信息

好比展现某一个具体的地点风的强度，有三个维度：精度，维度和风的强度，风的强度用圆的面积大小表示，圆越大，表明风的强度越大，可是人通常不善于判断面积，那么这个就适用于那些对于其中有一维辨识度没有那么高的三维数据的展现，可是具体的用的地方比较少，平时不多用

 

雷达图（平时用的很少）

多维数据集，四维以上，可是数据点有限（<=6），因此他的适用场景也有限，平时用的也少

 

雷达图能够用来表现一个周期数值的变化，也能够用来表现特定对象主要参数的相对关系。

雷达图多用于在财务分析中，用来分析企业负债能力、运营能力、盈利和发展能力等指标。

 

 

 

在使用方面：

Echarts里面的方法封装比较好，用的时候直接调用就能实现效果，

对于echarts的使用比较简单，引入echarts.js，而后就能够经过 echarts.init 方法初始化一个 echarts 实例并经过 setOption 方法设置图表实例的配置项以及数据，万能接口，全部参数和数据的修改均可以经过setOption完成，ECharts 会合并新的参数和数据，而后刷新图表。若是开启动画的话，ECharts 找到两组数据之间的差别而后经过合适的动画去表现数据的变化

 

而d3须要本身添加画布，绘制图形，绘制的每个图形都为一个对象，能够添加相应的事件操做，操做dom