产品特色
编辑推荐
适读人群 :本书适合所有想使用D3 实现数据可视化方案的人使用。读者朋友可以将本书作为入门参考,也可以作为速查手册。 “一图胜千言”,数据可视化使人们对海量复杂数据的阐释和理解变得事半功倍。D3是当今*流行的可视化利器。
本书用大量简洁直观的案例详细介绍了D3的使用。全书图文并茂,全彩印刷,力图使读者对D3有深入理解和整体把握。
内容简介
大数据时代,数据的价值愈加重要,数据在经历了数据获取、数据挖掘、数据展示三个主要阶段后直面用户。数据可视化处于这条生产链的下游,控制着数据对用户的输出,它的优劣直接决定了数据处理的效果。
D3作为***的开源的Web数据可视化工具之一,支持大数据量数据可视化展示,提供丰富的布局和生动的交互功能,能够充分表现数据的内涵,激发用户兴趣并增强用户与数据的沟通。
本书从基本语法特点、可视化布局、实际应用开发三个方面介绍D3,以期读者能够循序渐进掌握D3数据可视化开发的技能从而应用到科研和商业应用中。
作者简介
张天旭,CSDN博客技术专家,写有D3方面专栏,累计阅读量达到17万。
目录
第1 章 核心(Core) .......................... 1
1.1 选择 ......................................................... 1
1.1.1 d3.select(selector) .......................................... 1
1.1.2 d3.select(node) ............................................... 2
1.1.3 d3.selectAll(selector) ..................................... 3
1.1.4 d3.selectAll(nodes) ........................................ 4
1.1.5 selection.attr(name[, value]) .......................... 4
1.1.6 selection.classed(name[, value]) .................... 5
1.1.7 selection.style(name[, value[, priority]]) ........ 6
1.1.8 selection.property(name[, value]) .................. 6
1.1.9 selection.text([value]) .................................... 7
1.1.10 selection.html([value]) ................................. 8
1.1.11 selection.append(name) ................................ 9
1.1.12 selection.insert(name[, before]) ................... 9
1.1.13 selection.remove() ...................................... 10
1.1.14 selection.data([values[, key]]) .................... 10
1.1.15 selection.enter().......................................... 12
1.1.16 selection.exit() ........................................... 14
1.1.17 selection.filter(selector) ............................. 15
1.1.18 selection.datum([value]) ............................ 15
1.1.19 selection.sort(comparator) .......................... 16
1.1.20 selection.on(type[, listener[, capture]]) ...... 17
1.1.21 d3.event ..................................................... 18
1.1.22 d3.mouse(container) .................................. 19
1.1.23 selection.transition() .................................. 19
1.1.24 selection.select(selector) ............................ 19
1.1.25 selection.selectAll(selector) ....................... 20
1.1.26 selection.each(function) ............................. 21
1.1.27 selection.call(function[, arguments…]) ..... 22
1.1.28 selection.empty() ....................................... 23
1.1.29 selection.node() ......................................... 23
1.1.30 selection.size() ........................................... 23
1.2 过渡 ....................................................... 23
1.2.1 transition.delay([delay]) .............................. 23
1.2.2 transition.duration([duration]) ..................... 24
1.2.3 transition.ease([value[, arguments]]) ........... 25
1.2.4 transition.attr(name, value) .......................... 25
1.2.5 transition.attrTween(name, tween) .............. 26
1.2.6 transition.style(name, value[, priority]) ....... 26
1.2.7 transition.styleTween(name,
tween[, priority]) ......................................... 27
1.2.8 transition.text(value) .................................... 27
1.2.9 transition.tween(name, factory) ................... 28
1.2.10 transition.remove() .................................... 28
1.2.11 transition.select(selector) ........................... 29
1.2.12 transition.selectAll(selector) ...................... 29
1.2.13 transition.filter(selector) ............................. 30
1.2.14 transition.transition() .................................. 30
1.2.15 transition.each([type, ]listener) .................. 30
1.2.16 transition.call(function[, arguments…]) ..... 31
1.2.17 transition.empty() ....................................... 32
1.2.18 transition.node() ......................................... 32
1.2.19 transition.size() .......................................... 32
1.2.20 d3.ease(type[, arguments…]) ..................... 32
1.2.21 ease(t) ........................................................ 33
1.2.22 d3.timer(function[, delay[, time]]) ............. 33
1.2.23 d3.interpolate(a, b) ..................................... 34
1.2.24 interpolate(t) .............................................. 34
1.2.25 d3.interpolateNumber(a, b) ........................ 35
1.2.26 d3.interpolateRound(a, b) .......................... 35
1.2.27 d3.interpolateString(a, b) ........................... 35
1.2.28 d3.interpolateRgb(a, b) .............................. 36
1.2.29 d3.interpolateHsl(a, b) ............................... 36
1.2.30 d3.interpolat
前言/序言
数据可视化是用图形图像等方式表现数据内涵的技术。俗话说“一图胜千言”,数据可视化最重要的意义在于让数据变得简单直观。它有效利用了人眼的感知能力和大脑的处理能力,让数据中蕴含的规律一目了然。尤其是在大数据时代,数据可视化已成为一座桥梁,跨越了数据和使用者之间的鸿沟,减少了在数据分析、交流和传播中的障碍。它使得人们对海量、复杂数据的阐释和理解变得事半功倍。在很多情况下,数据可视化是理解和表达数据的有效手段,有时甚至是唯一的手段。
数据可视化的强大魅力还源于它是美而生动的。只有一堆数据难免枯燥乏味,可视化技术给数据穿上了华丽的外衣,丰富的交互功能增添了数据的灵动性。数据可视化绽放了数据之美。它让数据变得生动鲜活,有效地吸引了人们的注意力,能大大激发人们的好奇心和求知欲。让人们在与数据的交互过程中不仅探索到了知识还收获了乐趣。正因为如此,数据可视化技术蓬勃发展,在互联网、生物、金融、医学、建筑、教育、国防等需要展现数据的行业都有广泛的应用。
工欲善其事必先利其器。D3 是当今最流行的数据可视化工具之一。D3 是一个JavaScript库,擅长绘制交互式矢量图表,底层使用了SVG 绘图技术并通过数据驱动创建文档。D3 提供的API 主要包括对HTML 和SVG 文档的操作、处理多种格式的数据、为特定的可视化布局生成数据,以及提供丰富的交互和动画功能等。通过这些编程接口,我们既不用太关心底层实现,也不会因为封装程度太高而很难修改,所以D3 比Processing1这样的底层绘图库更简单,比Echarts2这样高度封装的图表库更自由,是一个灵活轻量的前端数据可视化库。而且D3 不依赖其他的库,你可以充分发挥想象,仅用D3 就可以创造绚丽多彩的数据可视化作品。当然,到底要不要使用D3 还需要根据具体情况进行选择,表0.1 可以作为一个技术选型的参考。
0.1 D3 的适用范围
考虑因素 适用范围
开源 D3 基于开源协议BSD-3-Clause3,可以免费用于商业项目。源码托管在GitHub 上4,截至2015年9 月26 日star 数已达41869 次,fork 数达11021 次,有大量用户和丰富友好的案例
兼容性 支持Firefox、Chrome、Safari、Opera、IE9+等现代浏览器。支持Android 和iOS 平台
功能 D3 擅长于绘制二维Web 数据可视化矢量图表,支持丰富的交互功能,支持创建自定义可视化方案。但不支持3D 可视化,并且加载到浏览器的数据量不能太大(10MB 以内较合适)。D3 不是现成的图表库,相比于封装好的图表库学习和开发成本都较高
目前D3 的官方文档已经十分全面了,涵盖了600 多个函数,全文接近6 万个单词。然而,D3 参考文档中的专业术语较多,很多地方表述十分晦涩艰深,原文中的示例代码较少,况且对于初学者来说直接看英文也很吃力。本书笔者为了方便D3 学习者更好地理解和使用D3,对D3 官方API(应用程序编程接口)5进行了详细介绍,不仅翻译了API 全文,还为大部分函数都编写了简单的示例代码。下面,我们先来看看本书涉及的D3 官方文档主要包含哪些内容,D3 API 总览如表0.2 所示。
表0.2 D3 API 总览
内容 简介
核心(Core) 包括选择器、过渡、数据处理、本地化、颜色等
比例尺(Scales) 在数据编码和视觉编码之间转换
可缩放矢量图形(SVG) 提供用于创建可伸缩矢量图形的实用工具
时间(Time) 解析或格式化时间,计算日历的时间间隔等
布局(Layouts) 推导定位元素的辅助数据
地理(Geography) 球面坐标,经纬度运算
几何(Geometry) 提供绘制2D 几何图形的实用工具
行为(Behaviors) 可重用的交互行为
本书覆盖了绝大部分的API,为方便使用,本书尽量保持与官方文档结构一致,对表0.2的每个部分单独成章介绍。本书所用的D3 版本是3.5.5,全文案例在Chrome 浏览器中调试通过。一些简单的函数直接使用浏览器的控制台演示,少部分案例需要使用服务器运行,大部分案例都可以直接打开HTML 文档来查看效果。对于本书的使用,强烈建议读者朋友们边看文字表述边参考示例代码动手实践。本书的随书源码可在https://github.com/tianxuzhang/d3-api-demo/archive/master.zip 和http://www.broadview.com.cn/下载使用,通过量的积累最终一定会有质的改变。大家要保持对新技术的兴趣和对理想的热情,在自学的同时多分享多讨论。D3 的学习会是很有成就感的,希望读者可以通过本书感受到数据可视化的魅力,能从中收获快乐。
致谢
首先要感谢章成志教授的启蒙教育,是他让我了解到D3 这门技术。并且,在学习和生活中给予了我足够的信任和支持。可以说,章老师是我真正的良师益友。
其次,感谢Mike Bostock 以及其他D3 贡献者,是他们开发了D3 这个优秀的数据可视化库,并且提供了大量简单实用的案例。正因为如此,才能让我们有机会领略数据可视化的奇妙。
还要感谢CSDN 这个平台,CSDN 是中国程序员最常使用的技术网站。通过CSDN 让我能够与更多数据可视化爱好者相识并共同探讨D3 相关技术。
感谢电子工业出版社的付睿编辑,没有伯乐就没有千里马,谢谢她给予我这个机会编写本书。感谢顾慧芳编辑,谢谢她为本书辛勤校对和编辑,这有效地保障了本书的质量。
最重要的是要感谢参与D3 参考文档翻译以及对本书提供帮助的人,他们是:崔博敏、何凯琳、张玉杰、季国亮、张烁、边城、卫学士、翟琰琦、路明非、何丽、谁浮、马语者、现明涟漪、Carry on、陶凜然、李琛婧、赵荣和宋墩江以及其他关心和支持我的人,和你们的讨论和交流是我最温暖的回忆。
最后,也是最应该感谢的是一直与我并肩奋斗的魏飞,感谢那些安静得只剩下键盘声的夜晚,每一个奋斗的日子都值得深深铭记。
由于作者水平有限,书中难免有错误之处,我们渴望得到您的反馈,如果发现问题请发送邮件至zhang_tianxu@sina.com,或者在新浪微博上@D3 数据可视化给我们批评指正。
张天旭
2015 年9 月
D3.js 数据可视化实战指南 拥抱数据的无限可能,用视觉语言讲述深刻洞察 在这个数据爆炸的时代,如何从海量信息中提取价值、洞悉趋势,已成为个人和组织成功的关键。数据可视化,作为连接数据与人类认知之间的桥梁,其重要性不言而喻。而 D3.js,作为前端数据可视化领域的王者,以其强大的灵活性、近乎无限的定制能力,以及对 Web 标准的深度支持,成为了无数开发者和设计师的首选工具。 本书并非 D3.js 的泛泛介绍,而是旨在为读者提供一套系统、深入且极具实操性的 D3.js 数据可视化学习路径。我们不满足于表面的 API 调用,而是深入剖析 D3.js 的核心设计理念,理解其如何在浏览器环境中高效运作,以及如何利用其强大的生态系统解决复杂的可视化难题。本书的宗旨是让你真正掌握 D3.js 的精髓,从零开始构建出令人惊叹、富有洞察力的数据可视化作品。 本书亮点: 循序渐进,构建扎实基础: 我们将从 D3.js 的核心概念讲起,包括 DOM 操作、SVG 和 Canvas 的绘制原理、比例尺、轴、数据绑定等基础知识。每一章都围绕着一个核心概念展开,并通过清晰的示例代码进行讲解,确保读者能够逐步理解并掌握。 聚焦核心 API,深入原理: 不同于某些浅尝辄止的教程,本书将重点解析 D3.js 最常用且最强大的 API。我们将深入理解 `select`, `selectAll`, `data`, `enter`, `update`, `exit` 等关键方法的工作机制,理解它们如何实现数据与 DOM 的联动,以及如何有效地管理可视化元素的生命周期。 实战驱动,案例丰富: 理论学习离不开实践。本书精心设计了多个不同难度、不同应用场景的实战案例,涵盖了折线图、柱状图、散点图、饼图、地图可视化、网络图等经典图表类型。每个案例都从需求分析、数据准备、图表构建到交互实现,提供了完整的开发流程。 掌握高级技巧,应对复杂需求: 随着对 D3.js 的深入,你将接触到如何处理动态数据、实现平滑过渡动画、构建响应式可视化、集成第三方库以及进行性能优化等高级话题。本书将引导你掌握这些技巧,让你能够应对更加复杂和个性化的可视化需求。 理解底层机制,提升解决问题能力: 了解 D3.js 底层的工作原理,如其如何与浏览器渲染引擎协同工作,如何管理内存,如何处理事件流等,将极大地提升你的调试和问题解决能力。本书会适时穿插对这些底层机制的讲解,帮助你成为一个更自信的 D3.js 开发者。 强调设计原则,打造优秀可视化: 优秀的可视化不仅在于技术实现,更在于其传达信息的清晰度和有效性。本书将穿插介绍数据可视化的基本设计原则,如选择合适的图表类型、颜色运用、信息层级等,帮助你创作出既美观又富有洞察力的作品。 代码风格规范,易于理解与复用: 本书提供的所有代码示例都遵循一致且良好的代码风格,注重可读性和模块化,方便读者理解、学习和移植到自己的项目中。 适合读者: 前端开发者: 渴望掌握一门强大且灵活的可视化工具,为自己的 Web 应用添加数据驱动的交互式图表。 数据分析师/科学家: 希望将分析结果以更直观、更具说服力的方式呈现,与他人分享洞察。 UI/UX 设计师: 追求更具表现力的数据可视化设计,提升用户体验。 对数据可视化感兴趣的初学者: 想要系统学习 D3.js,打下坚实的基础。 已有 D3.js 基础,希望深入进阶的开发者: 寻求更高级的应用技巧和底层原理的理解。 本书内容梗概(部分): 第一部分:D3.js 的基石——核心概念与工具 第一章:欢迎来到 D3.js 的世界 数据可视化的重要性与 D3.js 的定位 D3.js 的优势与适用场景 搭建开发环境:Node.js, npm/yarn, Webpack/Vite 第一个 D3.js 程序:Hello, World! 第二章:DOM 操作与选择器 D3.js 的选择器 API (`select`, `selectAll`) DOM 元素的创建、添加与移除 (`append`, `insert`, `remove`) 属性与样式的设置 (`attr`, `style`) 事件处理 (`on`) 第三章:SVG 与 Canvas 的魅力 SVG 基础:元素、坐标系、路径 使用 D3.js 绘制 SVG 元素(圆形、矩形、线、路径等) Canvas API 简介与 D3.js 的集成 SVG 与 Canvas 的选择与权衡 第四章:数据绑定:D3.js 的灵魂 理解数据与 DOM 元素的映射关系 `data()` 方法的应用 `enter()`, `update()`, `exit()` 的工作流程 键函数(key function)的重要性与应用 第五章:比例尺:数据到视觉属性的转换 比例尺的概念与作用 线性比例尺 (`scaleLinear`) 序数比例尺 (`scaleBand`, `scalePoint`) 时间比例尺 (`scaleTime`) 颜色比例尺 (`scaleOrdinal`, `scaleSequential`) 域(domain)与范围(range)的设置 第六章:坐标轴:让数据更易读 坐标轴的构成与作用 使用 D3.js 创建轴 (`axisBottom`, `axisLeft`, `axisTop`, `axisRight`) 轴的格式化(Tick formatting) 自定义轴样式 第二部分:构建经典的图表类型 第七章:折线图:展现趋势变化 数据准备与预处理 使用 `d3.line()` 生成路径数据 绘制折线与添加点标记 添加交互:鼠标悬停显示数据点信息 第八章:柱状图:比较离散的数据 分类数据的表示 使用 `d3.scaleBand()` 实现柱子的布局 绘制柱形与添加标签 动态更新柱状图:数据变化时的过渡效果 第九章:散点图:探索变量间的关系 双变量数据的可视化 使用 `d3.scaleLinear()` 映射 x、y 轴 绘制散点与自定义形状 添加交互:平移、缩放与信息提示 第十章:饼图与环形图:展示组成比例 比例数据的可视化 使用 `d3.pie()` 和 `d3.arc()` 生成扇形数据 为饼图添加颜色与标签 交互:扇形突出显示 第三部分:进阶应用与高级技巧 第十一章:地图可视化:数据的地理空间展现 GeoJSON 格式简介 D3.js 的地理投影 (`d3.geoProjection`) 使用 `d3.geoPath()` 绘制地理边界 结合地图数据与统计数据进行可视化 第十二章:网络图(力导向图):揭示连接关系 节点(nodes)与链接(links)的概念 D3.js 的力模拟器 (`d3.forceSimulation`) 实现节点与链接的动态布局 交互:拖拽节点,显示节点信息 第十三章:数据绑定与过渡动画 深入理解 `enter`/`update`/`exit` 的应用场景 使用 `transition()` 实现平滑的属性变化 延迟(delay)与持续时间(duration)的控制 组合过渡效果 第十四章:响应式可视化:适应不同屏幕尺寸 使用 CSS 媒体查询 D3.js 的尺寸自适应技巧 容器大小变化时的图表重绘 第十五章:数据获取与异步处理 使用 `d3.csv()`, `d3.json()`, `d3.tsv()` 加载外部数据 Promise 与 async/await 的应用 处理数据加载错误 第十六章:性能优化与最佳实践 内存管理与垃圾回收 避免不必要的 DOM 操作 Canvas 绘制的优势与时机 代码组织与模块化 第十七章:D3.js 生态系统与未来展望 常用的 D3.js 插件与扩展 与其他 JavaScript 库的集成 D3.js 的发展趋势与学习资源 结语 掌握 D3.js,意味着你将拥有将原始数据转化为生动、富有洞察力的视觉叙事的强大能力。本书将是你在这条道路上不可或缺的伙伴。我们鼓励读者在学习过程中勤加练习,动手实践每一个代码示例,并尝试根据自己的需求进行修改和扩展。数据可视化是一个充满创造力的领域,希望通过本书,你能点燃内心的火花,用 D3.js 创造出属于你自己的数据故事。 准备好迎接挑战,一起探索 D3.js 的无限可能吧!