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 ...
随机推荐
- 11.安装KVM虚拟机
安装KVM虚拟机是一大难题,不按照虚拟机物理机128G内存和强劲的CPU无法充分利用.也不便于后面的jenkins自动部署.安装KVM虚拟机过程我是借鉴了网上下载的马哥linux KVM那块的内容 ...
- MVC 4 用Nuget安装组件后的常见错误
1,[A]System.Web.WebPages.Razor.Configuration.HostSection 无法强制转换为 [B]System.Web.WebPages.Razor.Config ...
- 跨站脚本 XSS<一:介绍>
*XSS 利用的是用户对指定网站的信任,CSRF 利用的是网站对用户网页浏览器的信任 跨站脚本(Cross-site scripting,通常简称为XSS)是一种网站应用程序的安全漏洞攻击,是代码注入 ...
- poj1625Censored!(AC自动机+dp)
链接 第一次做这种题目,参考了下题解,相当于把树扯直了做DP,估计这一类题都是这个套路吧. 状态方程dp[i][next] = dp[i][next]+dp[i][j] ;dp[i][j]表示长度为i ...
- hibernate延迟加载(get和load的区别)
概要: 在hibernate中我们知道如果要从数据库中得到一个对象,通常有两种方式,一种是通过session.get()方法,另一种就是通过session.load()方法,然后其实这两种方法在获得一 ...
- SSH原理与运用
SSH是每一台Linux电脑的标准配置. 随着Linux设备从电脑逐渐扩展到手机.外设和家用电器,SSH的使用范围也越来越广.不仅程序员离不开它,很多普通用户也每天使用. SSH具备多种功能,可以用于 ...
- 终于解决了IE8不支持数组的indexOf方法,array的IndexOf方法
/* 终于解决了IE8不支持数组的indexOf方法 */ if (!Array.prototype.indexOf) { Array.prototype.indexOf = function (el ...
- s:iterator间接实现跳出循环
在用s:iterator遍历小组成员时需要过滤出管理员,然后在找到第一个管理员以后停止循环,下面是我的代码: <s:set name="index" value=" ...
- spring mvc 注解 学习笔记(一)
以前接触过spring,但是没有接触spring mvc 以及注解的应用,特习之,记之: 注解了解 @Component 是通用标注, @Controller 标注web控制器, @Service 标 ...
- [双连通分量] POJ 3694 Network
Network Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 9434 Accepted: 3511 Descripti ...