D3与echarts

转载自 https://blog.csdn.net/ysj1218/article/details/80523474

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对象，里面保存了当前事件的各种参数

在使用方面：

Echarts里面的方法封装比较好，用的时候直接调用就能实现效果。对于echarts的使用比较简单，引入echarts.js，然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化
而d3需要自己添加画布，绘制图形，绘制的每一个图形都为一个对象，可以添加相应的事件操作，操作dom