D3 的优势
可视化的库有很多,基于 JavaScript 开发的库也有很多,D3 有什么优势呢?
(1)数据能够与 DOM 绑定在一起
D3 能够将数据与 DOM 绑定在一起,使得数据与图形成为一个整体,即图形中有数据、数据中有图形。那么在生成图形或更改图形时,就可以方便地根据数据进行操作,并且,当数据更改之后,也能简单地更改图形。
(2)数据转换和绘制是独立的
将数据变成图表,需要不少数学算法。很多可视化库的做法是:
提供一个函数 drawPie() ,输入数据,直接绘制出饼状图。
但 D3 的做法是:
提供一个函数 computePie(),可将数据转换成饼状图的数据,然后开发者可使用自己喜欢的方式来绘制饼状图。
虽然看起来 D3 使得问题变得麻烦了,但是在图表要求比较复杂的时候,直接绘制的饼状图往往达不到要求,细微的部分没有办法更改。而 D3 将两者分离开来,就极大地提高了自由度,以至于开发者甚至可以使用其他的图形库来显示 D3 计算的数据。
(3)代码简洁
JQuery 是网页开发中很常用的库,其中使用了链式语法,被很多人喜爱。D3 也采用了这一语法,能够一个函数套一个函数,使得代码很简洁。
(4)大量布局
饼状图、树形图、打包图、矩阵树图等等,D3 将大量复杂的算法封装成一个一个”布局“,用于转换数据。能够适用于各种图表的制作。
(5)基于SVG,缩放不会损失精度
SVG,是可缩放的矢量图形。D3 的绘制大部分是在 SVG 上绘制的,并且提供了大量的图形生成器,使得在 SVG 上生成图形变得简单。
另外,由于 SVG 是矢量图,放大缩小不会有精度损失。
本文来自互联网,如有侵权请联系删除
D3 的优势的更多相关文章
- 【 随笔 】 D3 难吗?
有不少朋友说学 D3 挺难的.为什么呢?想写一篇文章分析分析. 1. D3 出现的背景 D3.js 是 Github 上的一个开源项目,用于数据可视化.作者是 Mike Bostock,纽约时报的工程 ...
- 初探React与D3的结合-或许是visualization的新突破?
自诞生之初截止目前(2016年初),React可以说是前端界最流行的话题,如果你还不知道React是何物,你就该需要充充电了. d3是由纽约时报工程师开源的一个绘制基于svg的数据可视化工具,是近几年 ...
- 【转】Laravel+Angularjs+D3打造可视化数据,RESTful+Ajax
http://897371388.iteye.com/blog/1975351 大致思路也就是下面,由于最近在学Laravel也在学Angularjs,加上之前做的项目用到了d3. 原来的方案如下: ...
- d3可视化实战02:理解d3数据驱动的真正含义
前文中已经提到,SVG从诞生之初起就可以非常方便地使用javascript脚本语言来进行其DOM对象的控制.当然,控制的方法有很多,有直接控制SVG对象的方法,例如使用原生js:有帮你封装一下图形接口 ...
- d3可视化实战01:理解SVG元素特性
一. SVG简介 ————————————————————————————————————————————————————————————————— SVG是一种和图像分辨率无关的矢量图形格式,它使用 ...
- D3学习之地图
D3学习之地图 (2017.03.09-03.11) 地图的意义 在可视化领域中,将数据点投影和关联到地理区域上,是一个非常关键的内容(体现了可视化中利用读者自身知识常识从而加速吸收信息的原则). G ...
- D3.js学习(七)
上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...
- D3.js学习(六)
上节我们学习了如何绘制多条曲线, 以及给不同的曲线指定不同的坐标系.在这节当中,我们会对坐标轴标签相关的处理进行学习.首先,我们来想一个问题, 如何我们的x轴上的各个标签的距离比较近,但是标签名又比较 ...
- 06.移动先行之谁主沉浮----我的代码我来写(Xaml的优势)
如果移动方向有任何问题请参考===> 异常处理汇总-移动系列(点) 前面几节课,我们都是在前台创建对象,进行一些设置,那么我们为什么不用传统的方法来编程呢? 我们今天来试试你就明了了~~ 打开M ...
随机推荐
- 5----table类型
table类型是非常重要的Lua数据类型,也是Lua唯一能描述数据结构的类型 table类型可以很灵活的描述多种数据结构,其本身是基于键值对的形式存储数据的 字典结构 字典结构的table 的两种创建 ...
- awk命令简单介绍
简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...
- HTML基础(2)
常见标签 1.img标签 <img src="图片地址" alt="图片名"/> 图片(单标签) alt属性 是图片名字,是给百度搜索引擎抓取使用 ...
- boost 编译,windows平台
下载Boost及生成bjam.exe文件 到Google网站搜索下载boost_1.52版本库,下载完成后,解压到X:下,这个地址自己随便定义.在解压的文件中搜索build.bat文件,把它所在的目录 ...
- Java 中 Comparable 和 Comparator 比较
Java 中 Comparable 和 Comparator 比较 目录: Comparable Comparator Comparable 和 Comparator比较 第二个例子 之 Compar ...
- JQuery_过滤选择器
一.基本过滤器 1.基本过滤器 过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类似:使用冒号(:)开头. <script type="text/ja ...
- 在与SQL Server建立连接时出现于网络相关的或特定于实例的错误
客户遇到一个问题,用“服务器名\实例名”远程连接另外一台命名实例的时候连接失败,报“在与SQL Server建立连接时出现于网络相关的或特定于实例的错误,未找到或无法访问服务器.请验证实例名称是否正确 ...
- 鼠标点击输入框文字消失 value placeholder 以及JQ实现效果 (仿京东的输入框效果)
鼠标点击输入框文字消失 value实现方法 placeholder实现方法 以及JQ实现placeholder效果 <input type="text" value ...
- css3旋转倾斜3d小动画
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- BestCoder Round #41
T1:ZCC loves straight flush(hdu 5228) 题目大意: 给出5张牌,问至少替换多少张牌可以构成同花顺. 题解: 1.直接枚举所有同花顺(枚举花色A-D和最小的数字1-1 ...