专栏首页博文视点Broadview开启D3:是什么让程序员与设计师如此钟爱

开启D3:是什么让程序员与设计师如此钟爱

小编说:D3是一个开源的JavaScript程序库。它对设计师来说很友好,因为它能让设计师使用SVG这种常见的图形格式进行创作。它对程序员来说也很合适,因为它是兼容Web标准的。下面让我们开启D3,聊聊这个在Web上实现数据可视化最牛的工具。 本文选自《图说D3:数据可视化利器从入门到进阶》

D3,即“Data Driven Documents”(数据驱动文档)的缩写,是由才华横溢的Mike Bostock编写的一个JavaScript程序库。D3名副其实,能将数据绑定到Web文档,然后基于数据来操纵那些文档。酷吧,但是这又能做什么呢?

我们先从D3是JavaScript编程库这件事说起。D3不是像Adobe Illustrator那样需要下载下来使用的软件,也不是类似R语言那样可以通过命令行工具来分析和生成图表的开发环境,更不是像Google Charts或Tableau Public那样能让你登录一个站点、插入一些数字然后就能生成股票图形的工具。换言之,就像每个用其他语言开发的扩展包一样,D3完全就是一个开源的JavaScript扩展。D3扩充了JavaScript的能力,特别是在数据可视化方面非常有用。

如果你是一个编程新手,这个答案可能让你感到不太满意。什么是程序库?物理上这个库里面又包含了哪些东西?答案是:一堆函数和方法(非常像函数的东西)。函数和方法包含了代码的可用执行序列,可以被重用。库本质上就是一组函数的集合,函数之间被设计成可以互相协同调用。这些函数集为编程提供了一种新的方式。

D3作为一个程序库,正是一组函数或方法及其定义(具体命令的执行序列)的集合。这组函数或方法包含在具体的JavaScript文件中。只要你愿意,现在就可以对其一窥门径。访问http://d3js.org/d3.v3.js,D3现在已经是第3个版本,正如它所宣称的那样,是开源的。

应该怎么使用它呢?通过新建一个网页并引入和运行这个JavaScript文件即可。当你在浏览器里运行d3.v3.js时,浏览器会导出D3的所有函数和方法,这样你就可以在自己的代码里面直接使用这些函数和方法了。如果其他用户访问你的站点,他的浏览器一样会直接运行d3.v3.js,D3的函数同样会被导出。

这些函数非常有用。D3绝对是一个能让程序员完全改变编程方式的JavaScript程序库。

D3最大的亮点和它的名称一样——数据驱动文档。D3使数据绑定并操纵Web文档成为可能。从技术上来讲,能被浏览器访问并被其渲染的东西都可以称为Web文档,这包括任何HTML页面,但更为重要的还有SVG(可缩放矢量图形)及图片。

你以前可能用过SVG。如果你是一名设计师,那就100% 用过了。SVG是一种矢量图形格式:图形的分辨率能够根据缩放级别自我调节,所以从来不会失真。其背后的秘密就是使用了一种类似HTML的标记语言来编码这种Web图形文档。例如,<p>标签代表段落,<h1>标签表示头部。SVG使用<circle>标签表示圆形,使用<line>标签表示线条。

用户可以通过D3将数据植入SVG文档是D3擅长数据可视化的一个重要因素。这也意味着你可以将单个数据点和SVG图形元素(如圆形、矩形及路径等)进行连接,然后基于这些数据连接点来格式化或重定位图形元素。

为了确保说明要点,我打算再重复一遍。D3可以让你直接在SVG这种华丽的Web文档格式的图形元素上根据数据值来设置属性!使用D3,就是在使用数据直接控制浏览器所显示的内容。简而言之,这就是D3。

  • 设计师为什么喜欢D3

如果你是一名设计师,有丰富的Adobe Illustrator或Inkscape使用经验,那么你一定会喜欢上D3,其创建、销毁和格式化SVG元素的方式是那么优雅。你肯定无数次从网上下载过SVG文件并粘贴到你的设计软件中。有了D3,你将来到SVG标签的内容深处,即使是第一次接触,也会发现其组成逻辑和命名方式似曾相识。对图形的内部着色称为“填充”,围绕边界的线条称为“笔触”。你可以将图形打包,然后统一运用渐变,剪切路径及改变对象的透明度。一旦学会其语法,其他的事情将水到渠成。

  • 程序员为什么钟爱D3

如果你是一个程序员,你会钟爱D3,因为D3基于现有Web标准的HTML和SVG就能发挥强大的威力,根本不需要依赖任何第三方插件或专属框架。基于Web的可视化工具以前就有,如Protovis、Flare及JavaScript InfoViz工具集。所有这些工具都依赖一套自己特有的方式在页面上制图(用技术术语来讲,就是都在使用自己的场景结构)。D3与众不同,它与数据结合,提供一种直接操作Web的内置场景结构,即文档对象模型的方式。

D3也从其他JavaScript库中汲取了一些精华。例如,可以像jQuery那样进行链式方法调用。

  • D3的使用要点

你可以用D3来制作一些用以娱乐或赚钱的东西,而不用缴纳任何许可证费用,甚至不需要提到D3的名字。D3是完全开放的。并非所有浏览器都支持D3,这是因为并非所有浏览器都执行Web标准。被称为“现代浏览器”的Google Chrome、Mozilla Firefox、Opera、Safari和Internet Explorer 9及其以上版本都兼容D3。

任何使用D3开发的项目,如果用户能看到其外观,即表示能访问其数据。一般情况下,这种等级的数据透明度不会引起安全问题——既然你已经打算将数据可视化并公开,那么这份数据应该不用保密了吧。不过,这倒是提醒我们要时刻注意检查数据来源是否允许原始数据被散布出去。

本文分享自微信公众号 - 博文视点Broadview(bvbooks),作者:博文视点

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-03-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【本周重磅】D3:一图胜千言的可视化利器

    博文视点Broadview
  • Jetpack来了:走近Google标准应用架构

    一个Android应用程序通常至少有一个Activity,当我们要开发一个小型Android应用程序时,通常会将大部分的代码写在Activity/Fragmen...

    博文视点Broadview
  • Flux 是什么?

    Flux 作为一种全新的方式,用于支持建立复杂的可扩展用户界面。当你在网上搜寻Flux的相关资料时,能了解到的大概也就是类似以上这些内容了。但我们该如何定义这样...

    博文视点Broadview
  • 【本周重磅】D3:一图胜千言的可视化利器

    博文视点Broadview
  • Mybatis之开启MySQL的预编译功能 原

    本文参考博客https://my.oschina.net/kailuncen/blog/905395,后自己验证的。

    克虏伯
  • 库克工资是普通员工201倍,纳德拉年薪三个亿,大公司贫富差距榜出炉

    根据美国证券交易委员会(SEC)2015年的规定,上市公司必须披露CEO和员工薪资中位数的比率,因此,每年的这个时候,社畜们都会收到“去年老板又赚了1个亿”的打...

    量子位
  • Table configuration with catalog null, schema null错误的一个原因

    Generation Warnings Occured Table configuration with catalog null, schema nul...

    用户5640963
  • 硬件知识之(低压差线性稳压器)LDO的选择

    低压差线性稳压器是新一代的集成电路稳压器,它与三端稳压器最大的不同点在于,低压差线性稳压器(ldo)是一个自耗很低的微型片上系统(soc)。它可用于电流主通道控...

    morixinguan
  • 卫星授时应用解析

    授时设备从北斗导航卫星或者GPS导航卫星的信号上获取标准的时间信息,将这些信息通过各种类型的接口传输给需要时间信息的设备(计算机、主控器、采样设备、RTU等),...

    时钟系统分析专家
  • php框架laravel:数据库建立:artisan

    aravel 迁移是一种数据库的版本控制。迁移通常和 结构生成器 配对使用来管理您应用程序的数据库结构。

    WindWant

扫码关注云+社区

领取腾讯云代金券