一: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的区别
- 目前各大公司的大数据平台多使用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。
- D3和echarts的区别?
D3:
太底层,学习成本大
兼容到IE9以上以及所有的主流浏览器
D3通过svg来绘制图形
可以自定义事件
Svg:
不依赖分辨率
基于xml绘制图形,可以操作dom
支持事件处理器
复杂度高,会减慢页面的渲染速度
Echarts:
封装好的方法直接调用
兼容到ie6以及以上的所有主流浏览器
echarts通过canvas来绘制图形
封装好的,直接用,不能修改
Canvas:
依赖分辨率
基于js绘制图形
不支持事件处理器
能以png或者jpg的格式保存图片
- 一般的交互都用在哪些方面上?
一般的数据交互,后台返回数据,前端将数据通过图表的形式展示给用户。对于这种只是展示数据的话我比较常用的是echarts
而像一些鼠标、键盘、触屏事件操作的话,是用d3实现的。因为svg支持事件处理器
当某个事件被监听到时,d3会把当前的事件存到d3.event对象,里面保存了当前事件的各种参数。
在使用方面:
Echarts里面的方法封装比较好,用的时候直接调用就能实现效果,
对于echarts的使用比较简单,引入echarts.js,然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过setOption完成,ECharts 会合并新的参数和数据,然后刷新图表。如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化
而d3需要自己添加画布,绘制图形,绘制的每一个图形都为一个对象,可以添加相应的事件操作,操作dom