可视化的库有很多,基于 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. Java开发中经典的小实例-(字符串倒序输出)

    public class Test12 {    public static void main(String[] args) {        // TODO Auto-generated meth ...

  2. IOS详解TableView——内置刷新,EGO,以及搜索显示控制器

    内置刷新 内置刷新是苹果IOS6以后才推出的一个API,主要是针对TableViewController增加了一个属性,refreshControl,所以如果想用这个内置下拉刷新的话,最好给你的Tab ...

  3. SSO之CAS总结

    1.采用kerberos原理 2.特点,经纪人模式即需要sso的所有用户账号要集中在一起 3.安全性保证方法: 关键就是保证TS和TGC的安全. 3.1)TS生成是采用足够随机算法,一次性使用,设置有 ...

  4. Caché数据库学习笔记(3)

    目录 Query函数及其测试 重建索引表 Management portal简介 远程访问Ensemble ============================================== ...

  5. 0020 Linux 文件操作命令

    1. 创建文件 touch 文件名 2. 删除文件 rm 文件名 3. 复制文件 cp 源文件 目录 4.剪切文件 mv 源文件 目标文件 5.重命名文件 mv 源文件名 新文件名 6.改变文件权限 ...

  6. php WIN下编译注意问题

    下载VC2012,安装打开CMD 须运行 vcvars32.bat (初始化VC编译环境) 下载PHP WIN编译包:http://windows.php.net/downloads/php-sdk/ ...

  7. C#窗体自定义控件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; u ...

  8. Makefile.am链接openCV库的写法

    6 INCLUDES = `pkg-config opencv --cflags` -I./ 17 bin_PROGRAMS+=SegRecogServerDeme 18 SegRecogServer ...

  9. Project2010简易操作指南[转]

    Microsoft Office Project 2010 操作手册 英文界面版 一.启动阶段 1. 前期准备 (1)新建项目文件 选择 File — NewNew 菜单, 选择项目模版 打开项目文件 ...

  10. PHP 每天的总结(1)

    今天写博客的心情比以往还要糟糕,因为........................(完结). 1.获取某输入框的值,有两中获取方式,GET和POST .前者  没有为顾客的账户安全着想.而后者返之: ...