数据可视化 D3 v4版本简介及相关技术

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/qq_39141486/article/details/102721755

D3简介

  D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个 被数据驱动的文档 。听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的。如果你不知道什么是 JavaScript ,请先学习一下 JavaScript,推荐阮一峰老师的教程。

   JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼。D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ,所以用 JavaScript 也是可以实现所有功能的,但它能大大减小你的工作量,尤其是在数据可视化方面,D3 已经将生成可视化的复杂步骤精简到了几个简单的函数,你只需要输入几个简单的数据,就能够转换为各种绚丽的图形。有过 JavaScript 基础的朋友一定很容易理解它。

数据可视化

[4,0.9,85,2,10,3,19,1,46,7.8]

  好比现在上面的这排数组,如果要一眼能看出来元素之间的大小关系,最直接的方式就是以图形的形式展示出来。
在这里插入图片描述

  比如说条形统计图,通过图形的显示,我们能直观的看出来,这些元素之间大小关系如何。当然,在我这次的学习过程中发现,D3的功能并不只是如此。

学习D3需要预备的知识

  • HTML:超文本标记语言,用于设定网页的内容
  • CSS:层叠样式表,用于设定网页的样式
  • JavaScript:一种直译式脚本语言,用于设定网页的行为
  • DOM:文档对象模型,用于修改文档的内容和结构
  • SVG:可缩放矢量图形,用于绘制可视化的图形

  在学习D3之前,我可以说是一点点前端经验都没有的,对于前端我的印象也只停留在能写个Ajax就够了。

  上面所需要的技术例如DOM,SVG我更是一点点都没有接触过。

  但是这并不影响什么,有上述这些技术基础的,能够帮助你更加快速的学习D3,但是没有也没有关系,在接下来的学习过程中遇到了相关的技术,去看看,了解它是什么就够了。

  技术在于实践和积累经验。

(ps:D3在版本的更新中将自身的方法进行了规范,在后续的文章中会提到一些我遇到的被规范的方法)

猜你喜欢

转载自blog.csdn.net/qq_39141486/article/details/102721755
今日推荐