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