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

Posted 2020-09-02

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

　　本文选自《图说D3：数据可视化利器从入门到进阶》，点此链接可在博文视点官网查看此书。
　　　　　　　　　　　　　　　
　　想及时获得更多精彩文章，可在微信中搜索“博文视点”或者扫描下方二维码并关注。
　　　　　　　　　　　　　　　　　　　

本文出自 “博文视点官方博客” 博客，请务必保留此出处http://bvbroadview.blog.51cto.com/3227029/1902862