D3.js数据可视化

songze 发布于2019-08-22 18:44 / 560人阅读

摘要：和之前用的有啥不同和都是用来生成各类图表的，区别的话可以从使用方法和实现方式上是通过来绘制图形具体使用方法是通过方法初始化一个实例并通过方法生成一个简单的柱状图很轻松搞定。通过来绘制图形使用时需要先创建画布元素然后进行各种绘制图形。

你的淘宝年度消费报告那炫酷的图表一下子让人忘了自己花了多少钱，各大门户网站、媒体都开始大量使用图表，于是乎又有一批工具等待我们学习的路上

什么是D3.js

D3.js（全称：Data-Driven Documents）大概翻译过来就是数据驱动文档，一看到后缀名的.js就放心了，只要你之前有Javascript的语言基础就可以开始D3.js了，其实它就是一个JavaScript库，和jquery一样都是封装好的JS库，只不过作用不同，D3.js主要是做数据可视化的，也就是各种炫酷的图表，比如折线图、弦图、力导向图等等，而jQuery主要是做页面DOM控制、AJAX和动画的。

D3.js和之前用的echarts.js有啥不同

D3.js和echarts.js都是用来生成各类图表的，区别的话可以从使用方法和实现方式上,echart.js是通过canvas来绘制图形具体使用方法是通过echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图很轻松搞定。D3.js通过svg来绘制图形,使用时需要先创建画布(svg元素),然后进行各种绘制图形。

从兼容方面对比两者的话,echart.js兼容到IE6及以上的所有主流浏览器，而D3.js兼容IE9及以上以及所有的主流浏览器，如果项目考虑兼容IE6，建议使用echart.js

从学习成本上来说,echart.js是封装好的方法可以直接调用,学习起来更加快速上手,而相对来说D3.js的学习偏底层学习起来成本较大,也正因为如此D3.js也有更大的灵活性,当你需要的图表中echart中找不到时可以来D3中自己搞定

D3.js图表有多炫酷

这里可以看到官方首屏的截图感受下

D3.js怎么使用
在D3官网（https://d3js.org/）选择Download the latest version (5.5.0) here点击进行下载，直接将下载的d3.js引入到页面当中或者通过网络连接进行引入
.

GPU云服务器云服务器 d3.js数据可视化实战大数据可视化 d3.js d3.js数据可视化实战手册 d3.js 数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96141.html

D3.js入门

摘要：通过函数可以选择出没有关联任何数据的图形，可以调用相关函数更新或是删除。 D3.js入门 1.什么是D3.js？ Data-Driver-Document（数据驱动文档）：是一个用来使用Web标准做数据可视化的js库；数据可视化：用交互的/可视化的方式对抽象数据进行展示，已达到数据认知的目的，数据是纯粹的的事实，纯粹意味着这种事实没有经过任何处理，而信息是数据处理后的结果，他揭示...

shixinzhang 2019-08-20 16:18 评论0 收藏0
Vs - 基于 d3.js 和 vue.js 的数据可视化

摘要：概述是一个基于和的数据可视化分析包，适用于图表，制作。目前支持的组件主依赖安装使用建议使用搭建环境，以下只针对标准环境。图及其他图标支持的数据类型请见项目主页。 Vs 概述 Vs 是一个基于 d3.js 和 vue.js 的数据可视化分析包，适用于图表，dashboard 制作。 Github Repo 目前支持的组件 d3Bar d3Line d3Pie d3ProgressArc...

Acceml 2019-08-22 16:23 评论0 收藏0
交互式数据可视化－D3.js（二）选择集和数据

摘要：相关的函数有两个和的工作过程的方法很简单，使用的也比较少。的工作过程能将数据各项分别绑定到选择的元素集上。当数组长度与元素数量不一致时，同样能够处理。多出的元素在最后。选择集 select和selectAll类似jquery： d3.select(body) d3.select(.body) d3.select(#body) d3.selectAll(...

leanote 2019-08-02 11:54 评论0 收藏0
交互式数据可视化－D3.js（二）选择集和数据

摘要：相关的函数有两个和的工作过程的方法很简单，使用的也比较少。的工作过程能将数据各项分别绑定到选择的元素集上。当数组长度与元素数量不一致时，同样能够处理。多出的元素在最后。选择集 select和selectAll类似jquery： d3.select(body) d3.select(.body) d3.select(#body) d3.selectAll(...

褰辩话 2019-08-23 12:42 评论0 收藏0