图形化开发(一)

您所在的位置:网站首页 标准化基本原理和方法 图形化开发(一)

图形化开发(一)

2024-07-17 07:57| 来源: 网络整理| 查看: 265

图形化开发(一)——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/格式化文本)和各种图表。



【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3