图形化开发(一)——D3.js的基本介绍、技术原理
图形化开发(一)——D3.js的基本介绍、技术原理
D3.js
为什么学习D3
中文官网——https://www.d3js.org.cn/
github——https://github.com/d3/d3
D3.js和threejs的应用场景完全不一样。threejs主要应用与基于webGL的3D场景,而D3.js确主要应用与2D场景。
它们一起形成了一种互补关系。
简而言之D3JS就是一个数据可视化的库。
那什么是数据可视化呢?
给出一组数据 [10,80,40,100,30,20,50]
类似的库 eharts
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,ECharts 提供了常规的折线图、柱状图、散点图、饼图 等等。
和eharts的区别
eharts是封装好的各种的图表可以直接拿来使用,类似于图表模具,直接拿来使用即可。
D3.js就像画笔一样,一切都由你自由发挥。
基本介绍
D3.js(Data-Driven Documents)是一个使用动态图形进行数据可视化的JavaScript程序库。与W3C标准兼容,并且利用广泛实现的SVG、JavaScript和CSS标准,改良自早期的Protovis程序库。与其他的程序库相比,D3对视图结果有很大的可控性。D3是2011年面世的,同年的8月发布了2.0.0版。到2018年4月,D3已被更新到了5.5.0版[1]。
发展历史
在D3.js开发之前已经有出现过许多尝试做数据可视化的包,例如Prefuse,Flare和Protovis程序库,他们都可以视为D3.js的前身。然而Prefuse和Flare皆有缺点,皆不能只透过浏览器完成渲染,皆须要透过额外插件来完成。
例如2005年发布的Prefuse是一个数据可视化程序库,但是它需要透过网页的Java插件才能于浏览器中呈现;而Flare是2007年发布的另一个数据可视化工具包,由于其是使用ActionScript编程语言开发,因此也需要额外插件,即Flash插件才能完成渲染。
2009年,史丹佛大学的史丹佛可视化团队(Stanford Visualization Group)的杰佛瑞·赫尔、迈克·保斯托和瓦迪姆·欧格菲兹齐利用开发Prefuse和Flare的经验开始用Javscript开发了可从给定数据产生SVG图形的Protovis程序库。而Protovis程序库在业界和学界皆有一定的知名度[3]。
2011年,史丹佛可视化团队停止开发Protovis,并开始开发新的数据可视化程序库,借由之前开发Protovis的经验,开发出了D3.js程序库,在注重于Web标准的同时提供了更丰富的平台也有了更好的性能[4]。
技术原理
D3.js透过预先创建好迁入于网页中的JavaScript函数来选择网页元素、创建SVG元素、调整CSS来呈现数据,并且也可以设置动画、动态改变对象状态或加入工具提示来完成用户交互功能。使用简单的D3.js函数就能够将大型的数据数据结构与SVG对象进行绑定,并且能生成格式化文本和各种图表。
式化文本](https://zh.wikipedia.org/wiki/格式化文本)和各种图表。
图形化开发(一)——D3.js的基本介绍、技术原理相关推荐
- 图形化开发(一)——Three.js基本介绍-优缺点-在线编辑器 Babylon.JS是最好的JavaScript3D游戏引擎
图形化开发(一)--Three.js基本介绍-优缺点-在线编辑器 & Babylon.JS是最好的JavaScript3D游戏引擎 课程主要学习目标 Threejs ( 3d ) D3 (做数 ...
- 图形化开发(五)021-Three.js之材质——不受光影响-MeshBasicMaterial-同颜色MeshNormalMaterial-方向不同颜色LineBasicMaterial线条材质
图形化开发(五)021-Three.js之材质--不受光影响-MeshBasicMaterial-整个物体颜色一样&MeshNormalMaterial-方向不同自动改变颜色 & Li ...
- 图形化开发(五)022-Three.js之材质——受光影响-MeshLambertMaterial 兰伯特材质 MeshPhongMaterial 高光材质
图形化开发(五)022-Three.js之材质--受光影响-MeshLambertMaterial 兰伯特材质 & MeshPhongMaterial 高光材质 添加光 由于MeshBasic ...
- 图形化开发(六)01-Three.js之导入模型——3dmax和SketchUp-editor编辑器导出json文件,在创建模型initMesh中外部的JSON文件
图形化开发(六)01-Three.js之导入模型--3dmax和SketchUp-editor编辑器导出json文件,在创建模型initMesh中外部的JSON文件 导入模型 官方推荐我们使用的3D模 ...
- d3.js折线图_学习使用D3.js创建折线图
d3.js折线图 by Sohaib Nehal 通过Sohaib Nehal 学习使用D3.js创建折线图 (Learn to create a line chart using D3.js) 使用 ...
- Arduino的图形化开发环境: ArduBlock
转载自http://youngmakers.cn/groups/articles/54f9466b9835fed6656d4dd6 ArduBlock是一款为Arduino设计的开源图形化编程软件,由 ...
- 【MSP430G2553】图形化开发笔记(2) 系统时钟和低功耗模式
目录 系统时钟概述 BCS+模块单元的基本构造 时钟-概览 介绍 Basic User 模式 Power User 模式 1. 数控振荡器 DCO 2. 出厂预校正频率 3. 低频振荡器 VLO 4. ...
- python 图形化开发用什么模块_用python进行GUI开发的选择/python的GUI模块(图形界面开发库)...
Python最大的特点就在于她的快速开发功能.作为一种胶水型语言,python几乎可以渗透在我们编程过程中的各个领域.这里我简单介绍一下用python进行gui开发的一些选择. 1.Tkinter T ...
- pyqt5 不报错退出_最新版本Python图形化开发环境Anaconda(Python3.7) +PyQT5+Eric6
Anaconda是完全免费的企业级的Python发行大规模数据处理.预测分析和科学计算工具.Anacoda是Python科学技术包的合集,所以不同的包所遵循的协议不一样.PyQt5与Eric6是众所周 ...
最新文章
- 最后3天,BDTC 2019早鸟票即将售罄,超强阵容及议题抢先曝光!
- 2012 iis php mysql_Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建wordpress博客教程
- 安卓setclicklistener函数没有_金主脚本按键精灵安卓按键初体验—乱斗西游2自动签到...
- EDA 事件驱动架构与 EventBridge 二三事
- hdu java_HDU Java8 集锦
- php中用js自定义弹窗,用js实现的自定义的对话框的实现代码_javascript技巧
- linux mysql查看所有表_Linux之系统操作命令
- 安装adt-bundle-windows-x86-20130917时遇到的问题及解决方法
- 使用RabbitMQ做的一些工作及经验教训
- §4.1.2数学归纳法证明不等式第6题 (复旦大学2004年保送生考试数学试题)
- 把一个byte高低位进行交换
- Java实习生的一天
- 嵌入式开发(一):嵌入式开发新手入门
- 使用ccproxy代理服务器上网
- MindSpore:自然语言处理(NLP)—分词技术
- win7注册表常用设置
- java计算机毕业设计学校食堂订餐管理源码+数据库+系统+lw文档+部署
- android黑科技系列——微信抢红包插件原理解析和开发实现
- 数据分析 | 岭回归与LASSO回归
- Jupyter Notebooks 入门
热门文章
- 前后端常见的几种鉴权方式
- 规则 |《淘宝网珠宝饰品行业标准》12月30日生效!
- touch 的使用手册
- 700亿入市资金详解:上海国资大盘整
- json数据在谷歌浏览器的高亮显示
- 从基础讲全排列(Java实现)
- wget mysql 镜像_我用wget下载CentOS镜像文件
- 学系统集成项目管理工程师(中项)系列19b_成本管理(下)
- 计算机学院吉祥物意见征集,中国农业大学土地科学与技术学院 通知公告 关于开展土地学院吉祥物、学院LOGO、院训征集活动的通知...
- 日媒称IPHONE6不是圆角矩形 将配备曲面屏幕