可视化的库有很多,基于 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 的优势的更多相关文章

  1. 【 随笔 】 D3 难吗?

    有不少朋友说学 D3 挺难的.为什么呢?想写一篇文章分析分析. 1. D3 出现的背景 D3.js 是 Github 上的一个开源项目,用于数据可视化.作者是 Mike Bostock,纽约时报的工程 ...

  2. 初探React与D3的结合-或许是visualization的新突破?

    自诞生之初截止目前(2016年初),React可以说是前端界最流行的话题,如果你还不知道React是何物,你就该需要充充电了. d3是由纽约时报工程师开源的一个绘制基于svg的数据可视化工具,是近几年 ...

  3. 【转】Laravel+Angularjs+D3打造可视化数据,RESTful+Ajax

    http://897371388.iteye.com/blog/1975351 大致思路也就是下面,由于最近在学Laravel也在学Angularjs,加上之前做的项目用到了d3. 原来的方案如下: ...

  4. d3可视化实战02:理解d3数据驱动的真正含义

    前文中已经提到,SVG从诞生之初起就可以非常方便地使用javascript脚本语言来进行其DOM对象的控制.当然,控制的方法有很多,有直接控制SVG对象的方法,例如使用原生js:有帮你封装一下图形接口 ...

  5. d3可视化实战01:理解SVG元素特性

    一. SVG简介 ————————————————————————————————————————————————————————————————— SVG是一种和图像分辨率无关的矢量图形格式,它使用 ...

  6. D3学习之地图

    D3学习之地图 (2017.03.09-03.11) 地图的意义 在可视化领域中,将数据点投影和关联到地理区域上,是一个非常关键的内容(体现了可视化中利用读者自身知识常识从而加速吸收信息的原则). G ...

  7. D3.js学习(七)

    上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...

  8. D3.js学习(六)

    上节我们学习了如何绘制多条曲线, 以及给不同的曲线指定不同的坐标系.在这节当中,我们会对坐标轴标签相关的处理进行学习.首先,我们来想一个问题, 如何我们的x轴上的各个标签的距离比较近,但是标签名又比较 ...

  9. 06.移动先行之谁主沉浮----我的代码我来写(Xaml的优势)

    如果移动方向有任何问题请参考===> 异常处理汇总-移动系列(点) 前面几节课,我们都是在前台创建对象,进行一些设置,那么我们为什么不用传统的方法来编程呢? 我们今天来试试你就明了了~~ 打开M ...

随机推荐

  1. iscroll 使用及遇到的问题

    介绍: iscroll.js 是滑动事件.在手机上可以快速的滑动,用户体验很好.在线例子: 选择套餐 iScroll必须在调用之前实例化---用法 <script src="iscro ...

  2. 【OOAD】OOP的主要特征

    聚合 “虚包含” 不明确组合 “实包含” 明确 抽象(abstract)抽象:抽象是通过特定的实例抽取共同特征以后形成概念的过程.它强调主要特征,忽略次要特征.一个对象是现实世界中一个实体的抽象,一个 ...

  3. c#入门笔记(1)数据类型

    1.c#有三种数据类型,分别是数值型,引用类型,指针类型. 2.数值类型 2.1整数类型:sbyte,byte,short,ushort ,int uint,long,ulong(u开头是无符号,范围 ...

  4. JAVA 使用POI导出数据格式为Execl

    需要下载一个poi的jar包. 控制器 @Override public void getContractListExecl(Contract contract, BindingResult resu ...

  5. fiddler,https抓包设置

    1.fiddler 2 汉化版本不支持https证书下载,需要下载fiddler 4版本进行验证 若fiddler 2版本,可能存在无法访问Pc端fiddler返回页面,无法下载证书 2.打开Fidd ...

  6. Python 去剑式

    Python 去剑式 种种变化,用以体演总诀.共有三百六十种变化. 用以破解普天下各门各派的剑法.「破剑式」虽只一式,但其中于天下各门各派剑法要义兼收并蓄:虽说「无招」却是以普天下剑法之招数为根基,因 ...

  7. C# 字符串转义和反转义

    System.Text.RegularExpressions.Regex.Unescape(s) System.Text.RegularExpressions.Regex.Escape(s)

  8. PDF 补丁丁 0.4.3.1518 测试版发布:书签编辑器新增升级书签功能、优化PDF文档阅览器

    新的 PDF 补丁丁测试版上线啦! 新版本增加了升级书签的功能(见工具栏的“←”按钮),可以方便地将下级书签升级为上级书签. 另外,新版本还增强了书签编辑器功能中的 PDF阅读器,从之前的单页阅读模式 ...

  9. vtune 错误

    The Data Cannot be displayed,there is no viewpoint available for data 1. In a console, run your appl ...

  10. nodejs gulp less编辑

    nodejs 下载地址:http://pan.baidu.com/s/1bnz2oPp 提取密码:0mip 1.最简单的编译less 在安装好nodejs后,cmd 进入控制台 安装 lessc : ...