js 图表数据可视化

一：D3

含义：D3代表数据驱动文档，是一个用于创建动态和交互式数据可视化的JavaScript库。它于2011年首次发布，包含一组非常灵活和强大的特性，可以帮助您构建各种图形数据可视化。

D3.js允许绑定任意数据到DOM，然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HTML表格，或是利用它的流体过度和交互，用相似的数据创建惊人的SVG条形图。能够轻松的兼容大多数浏览器，同时避免对特定框架的以来。

二：echarts

访问网址：echarts.baidu.com/examples/#c…

内容：echarts中各种图表类型都含有，如柱状图，折线图，饼图等等，都含有

三：Antv

访问网址：antv.alipay.com/zh-cn/index…

内容：antv中含有G6和G2，可以实现简单血缘图的实现

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

在使用方面：

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

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

而d3需要自己添加画布，绘制图形，绘制的每一个图形都为一个对象，可以添加相应的事件操作，操作dom