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