可视化的库有很多,基于 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开发中经典的小实例-(比较输入数值的最大值、最小值和平均值)

    //输入数字个数来产生数字并且比较大小 import java.util.Scanner;public class Test1 {     public static void main(String ...

  2. DSO转换规则的Aggregation默认为覆盖MOV

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  3. 【OOAD】OOAD概述

    什么是面向对象? OOP:面向对象编程(Object Oriented Programming,OOP,面向对象程序设计)是一种计算机编程架构.OOP 的一条基本原则是计算机程序是由单个能够起到子程序 ...

  4. LTE Module User Documentation(翻译8)——核心网(EPC)

    LTE用户文档 (如有不当的地方,欢迎指正!) 14 Evolved Packet Core (EPC)   我们现在讲解如何编写一个仿真程序——除了 LTE 无线接入网外,还允许仿真 EPC. EP ...

  5. HDU-4528 小明系列故事——捉迷藏 BFS模拟

    题意:链接 分析:每一个D或者是E点往四面延伸,并且赋一个特殊的值,能看到D点的点赋值为1,能看到E点的点赋值为1000,这是因为最多100步,因此最后可以根据除以1000和对1000取模来得出某个状 ...

  6. 和Java相关的一些好文章(不定期更新)

    1.Java 集合类详解 (包括arraylist,linkedlist,vector,stack,hashmap,hashtable,treemap,collection等). 2.Java 理论与 ...

  7. nodejs系列(二)REPL交互解释 事件循环

    一.REPL交互解释 命令行中输入node启动REPL: > var x =2;undefined> do{x++;... console.log("x:="+x);. ...

  8. android音视频点/直播模块开发

      音视频 版权声明:本文为博主原创文章,未经博主允许不得转载. 前言 随着音视频领域的火热,在很多领域(教育,游戏,娱乐,体育,跑步,餐饮,音乐等)尝试做音视频直播/点播功能,那么作为开发一个小白, ...

  9. MAC air 安装redis-3.0.6

    redis版本: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Menlo; color: #c33720; background-colo ...

  10. Java—类的封装、继承与多态

    一.类和对象 1.类 类是数据以及对数据的一组操作的封装体. 类声明的格式: 类声明 { 成员变量的声明: 成员方法的声明及实现: } 1.1 声明类 [修饰符] class 类<泛型> ...