【D3.js in Action 3 精译】1.2.2 可缩放矢量图形(一)

译注
由于 1.2.2 小节介绍 SVG 的篇幅过多,为了方便查阅,后续将分多个小节依次进行翻译。为了确保整个 1.2.2 小节的完整性,特意将上一篇包含的 SVG 小节的内容整理出来重新编排。敬请留意。

1.2.2 SVG - 可缩放矢量图形

可伸缩矢量图形(Scalable Vector Graphics,即 SVG)的引入从根本上改变了网络的面貌。SVG 图形在短短几年内就成为了主要的 Web 开发工具。与栅格图形(如 PNGJPG 格式图片)由微小像素构成、并且像素点在放大倍数过高时清晰可见的设计理念不同,矢量图形则是基于数学和几何学构建而成的,能够在任何尺寸、任何屏幕分辨率下保持清晰的外观。SVG 图形的另一个重要优势是可以直接注入到 DOM 中,不仅可以让开发人员直接操作该元素并添加动画效果,而且还可以供屏幕阅读器访问。如果构建得当,SVG 图形也能具备高性能,其文件大小仅为相同效果的栅格图像的一小部分。

用 D3 来创作数据可视化作品,通常会将 SVG 图形注入 DOM,通过修改它们的 attribute 属性来生成各种可视化视觉元素。了解 SVG 的工作原理、主要图形及其主导视觉呈现的 attribute 属性,对大多数 D3 项目而言至关重要。本节后续内容将逐一介绍整个 D3 项目中会被反复重用的 SVG 形状。如果您对 SVG 还不太熟悉,请务必花点时间与我们一起敲敲代码。我们承诺这将大幅降低您未来使用 D3 的难度。

如何访问代码文件

本书的每一章都包含了编程练习(code-along exercises),旨在进一步提升学习体验。强烈建议您在阅读本书时“动手”实践,而不仅仅满足于“阅读”学习。完成每一章设置的练习环节,可以让您更好地消化吸收所学知识,并尽快开始构建您自己的 D3 项目。

对于每个练习项目,您都可以访问现成的源代码文件,在本书的 Github 仓库(http://mng.bz/Xqjv)中找到它们。如果熟悉 Git,还可以克隆该仓库到您本地计算机,或者下载对应的压缩文件。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
示意图:从 GitHub 仓库下载源码文件

每个章节都有各自的文件夹,包含一个或多个练习。每个练习都按章节顺序进行了编号。练习包括一个 start 文件夹,其中包含开始练习所需的所有文件;而在 end 文件夹中有对应练习的完整参考答案。根据您在每一章、各个小节的学习进展,您既可以沿用上一小节练习后的代码,也可以使用与当前小节对应的代码文件夹进行练习,两种方式殊途同归。

先从矢量图开始。根据本书提供的源码文件,找到 chapter_01/SVG_Shapes_Gallary 下的 end 文件夹,在 index.html 文件上单击鼠标右键,从 打开方式(Open with 菜单项选择一个浏览器。推荐使用 Chrome 或 Firefox 浏览器, 因为它们有出色的检查工具(inspector tools)。文件将从一个新的浏览器标签页打开,并看到如图 1.8 所示的矢量图。您也可以从托管到 GitHub 上的在线项目浏览这些 SVG 图形(http://mng.bz/yZmB)。

图 1.8 本节待构建的基本 SVG 图形图 1.8 本节待构建的基本 SVG 图形

您看到的这些都是今后用 D3 构建可视化项目时最常用的一些 SVG 图形,包括:直线(lines)、矩形(rectangles)、圆形(circles)、椭圆(ellipses)、路径(path)和文本(text)。

使用时,通常需要告诉 D3 哪些形状需要追加到 DOM 中,以及需要包含哪些视觉呈现属性,以便找出与这些尺寸、颜色及位置信息相匹配的理想图形。接下来的练习环节将通过代码来逐一创建图 1.8 中展示的 SVG 图形。我们不妨将该练习称为 SVG 画廊(Gallery of SVG Shapes。通过此次练习,您将进一步了解入手 D3 项目需要掌握的所有 SVG 相关的基础知识。

用您习惯的代码编辑器打开练习项目 SVG_Shapes_Gallery 下位于 start 文件夹内的 index.html 文件。推荐使用 VS Code 编辑器——一款免费又好用的多功能代码编辑器,拥有许多前端开发需要的实用工具。

如代码清单 1.1 所示,index.html 是一个简单的 HTML 文件。如果用浏览器打开(鼠标右键单击文件,从 打开方式(Open With 菜单选择一款浏览器即可)将看到一片空白,因为 <body> 元素是空的。下一小节,将给 <body> 元素添加各类 SVG 图形。

代码清单 1.1 练习项目 SVG 画廊的初始 HTML 文件

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>SVG Shapes Gallery | D3.js in Action</title>
</head>
<body></body>
</html>

如何查找更多信息

后续内容将介绍多个 SVG 元素及其 attribute 属性。作为前端开发人员,常常会借助一些在线资源来构建项目、引入不太熟悉的 SVG 元素、或者寻找某个 JavaScript 功能来实现特定操作。MDN 在线文档(MDN Web Docs,详见 https://developer.mozilla.org/)就是这样一个可靠且全面的资源,其中包含了大量通俗易懂并且支持修改的实用示例,如 SVG 元素及其属性用法、CSS 样式属性以及 JavaScript 函数等。

1 响应式 SVG 容器

在 SVG 的图形世界中,<svg> 容器是用于绘图的白板。每个 SVG 形状都嵌套在该 <svg> 父元素中。想查看实际效果,编辑 index.html 文件并在 <body> 元素内添加一个 SVG 容器,然后在浏览器中重新加载该页面。目前还看不到任何内容:

<body><svg></svg>
</body>

打开浏览器的检查工具(在浏览器窗口中右键单击并选择 检查(Inspect)。在检查窗口中会看到组成当前页面的 DOM 结构。找到 <svg></svg> 容器(又称 SVG 节点)。将鼠标移动到检查窗口内的容器上,SVG 元素就会在页面上高亮显示,如图 1.9 所示:

图 1.9 从 DOM 树选中 SVG 节点
图 1.9 从 DOM 树选中 SVG 节点,并在视口中高亮显示

默认情况下,浏览器中的 SVG 容器宽 300px 像素、高 150px 像素,但可以通过给 attribute 属性赋值进行调整。此时的 attribute 属性就是用来提供 HTML 元素的附加信息。在 SVG 行内元素中(With inline SVG),主要是通过 attribute 属性来设置构成 SVG 图形的各个形状的尺寸及位置信息。

例如,可以设置 SVG 元素的宽度(width)和高度(height)属性(attribute)。返回文本编辑器,向 SVG 容器添加一个 widthheight 属性,属性值分别设为 900300,然后保存:

<svg width="900" height="300"></svg>

在浏览器中重新加载项目,并在检查工具中定位 SVG 节点。请注意,现在 SVG 元素上出现了宽度和高度属性。如果将鼠标悬停在 DOM 树的 SVG 节点上,还将看到视口中的 SVG 容器此时的大小为 900px × 300px,如图 1.10 所示:

图 1.10 SVG 节点通过属性来指定大小

图 1.10 SVG 节点通过属性来指定大小

为了方便查看 SVG 容器,不必每次从检查工具高亮展示,不妨给它加上一个边框。向 SVG 元素添加一个 style 属性(attribute),并插入 CSS 边框属性(property)。如以下代码片段所示,通过边框简写属性(property)来创建一个宽 1px 像素的黑色实线边框:

<svg width="900" height="300" style="border:1px solid black;"></svg>

保存并重新加载页面,确认 SVG 容器周围存在边框;再调整浏览器窗口大小,直到小于 SVG 容器。可以看到 SVG 容器保持固定宽高,不会适应浏览器窗口大小。接下来,尝试让 SVG 容器变为响应式容器。

前面将 SVG 的 attribute 属性设置为绝对值(900300),浏览器以像素为单位将其解析为相应的测量值(900px300px);这里也可以使用百分比。回到文本编辑器中,将宽度改为相对值 100%,保存后重新加载页面:

<svg width="100%" height="300" style="border:1px solid black;"></svg>

再次调整浏览器窗口大小,留意 SVG 是如何占据整个可用宽度、并同时保持固定高度 300px 的。情况好多了,只是容器的原始宽高比(aspect ratio)也丢失了。

要让 SVG 元素变为响应式设计,可以使用 viewBox 属性(viewBox attribute)。删除编辑器中的 widthheight 属性,并将其替换为 viewBox 属性,赋值为 "0 0 900 300"

<svg viewBox="0 0 900 300" style="border:1px solid black;"></svg>

再次调整浏览器窗口大小进行验证。注意到了吗?此时 SVG 容器在保持宽高比 900:300 不变的情况下适应了任何屏幕尺寸,从而得到一个响应式的 SVG!

正如您看到的那样,viewBox 属性由四个属性值组成。前两个数值指定了 viewBox 的坐标系原点(xy)。本书将统一使用 0 0,知道这些值可以调整 SVG 容器在屏幕的可见部分还是很有帮助的。viewBox 后两个数值分别指定了宽度(width)和高度(height)。它们定义了 SVG 的宽高比,并确保它能完美适应任何容器并作相应缩放而不致失真。

(未完待续)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/36056.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

kaoYan-English

英语的提高是个日积月累&#xff0c;可以花一个月时间突击政治。但英语不可。关键在于单词和阅读理解 提高英语成绩的捷径&#xff0c;多做阅读题。阅读理解的分值高&#xff0c;阅读理解在巩固词汇&#xff0c;培养语感有不可替代作用。 选资料&#xff0c;贴合考研难度的&a…

x264 编码器 i_intra_cost 计算过程

介绍 是uint16_t类型指针变量,用来存储每个宏块的帧内代价值,在 frame.h 文件中x264_frame_t结构体中声明。在*frame_new 函数中将lowres_costs[0][0]指向给i_intra_cost,并 memset 为-1;//代码有删减 frame->i_intra_cost = frame->lowres_costs[0][0]; memset( fra…

Raspbian命令行连接WiFi网络

Raspbian命令行连接WiFi网络 1. 源由2. 环境3. 信号4. 连接5. 检查6. 断开 1. 源由 “懒人”多福&#xff0c;是什么原因&#xff0c;大家知道不&#xff0c;哈哈。 如果大家关注过之前《Ardupilot开源代码之Rover上路计划》&#xff0c;为了笔记本电脑在不断网的情况下进行配…

Rust 中使用 :: 这种语法的几种情况

文章目录 1. 访问模块成员&#xff1a;2. 访问关联函数或静态方法&#xff1a;3. 访问 trait 的关联类型或关联常量4. 指定泛型类型参数 1. 访问模块成员&#xff1a; mod utils {pub fn do_something() { /* ... */ } }let result utils::do_something();2. 访问关联函数或静…

【Spring Cloud Alibaba AI】简单使用

本文基于官方文档。 Spring AI 官方文档&#xff1a;Spring AI :: Spring AI Reference 中文文档&#xff1a;Spring AI 简介 - spring 中文网 (springdoc.cn) Spring AI 是 Spring 官方社区项目&#xff0c;旨在简化 Java AI 应用程序开发&#xff0c;让 Java 开发者像使用…

达梦数据库死锁排查和解决

达梦数据库死锁排查和解决 链接: 达梦数据库死锁排查和解决

道路元素位置和方向的坐标系统: 点 线 面 连接点

道路元素位置和方向的坐标系统: 下图道路元素在地球坐标系中的位置&#xff0c;该位置由三个坐标轴&#xff08;x, y, z&#xff09;组成的笛卡尔坐标系来确定。这种描述特别适用于三维建模和地理信息系统&#xff08;GIS&#xff09;中&#xff0c;其中道路被视为一个三维模型…

XSLT 转换:深入解析与实际应用

XSLT 转换:深入解析与实际应用 引言 XSLT(Extensible Stylesheet Language Transformations)是一种用于将XML文档转换为其他格式(如HTML、XML或文本)的语言。它由W3C制定,是XML技术栈的重要组成部分。XSLT转换不仅限于格式转换,还可以用于数据提取、报告生成、复杂计算…

陈皓(左耳朵皓子):程序算法与人生选择

写于2012&#xff0c;虽然过去很久了&#xff0c;现在读来依然很受启发&#xff0c;或许这就是好文的标准吧&#xff0c;不随着时间的流逝而减弱。 每年一到要找工作的时候&#xff0c;我就能收到很多人给我发来的邮件&#xff0c;总是问我怎么选择他们的offer&#xff0c;去腾…

使用 position:absolute; 定位的元素在ios上被遮盖

在ios上一个元素使用position:absolute;定位后&#xff0c;被其它元素遮盖 在使用absolute的元素上加一行代码 -webkit-transform: translate3d(0, 0, 0);

[渗透测试] 任意文件读取漏洞

任意文件读取漏洞 概述 漏洞成因 存在读取文件的功能&#xff08;Web应用开放了文件读取功能&#xff09;读取文件的路径客户端可控&#xff08;完全控制或者影响文件路径&#xff09;没有对文件路径进行校验或者校验不严格导致被绕过输出文件内容 漏洞危害 下载服务器中的…

Linux下反汇编相关工具

Linux下反汇编相关工具 程序出现崩溃堆栈&#xff0c;如果事先没有装调试包或者以调试模式编译&#xff0c;则打出的堆栈中看不到函数名&#xff0c;或者显示 n/a。此时往往需要根据 backtrace 打印的函数偏移地址来确定调用的是什么函数&#xff0c;这里就涉及到比较高级的调…

Java8新特性Stream

Stream 是 Java 8 引入的一种新的抽象&#xff0c;用于处理集合类 (Collection) 的数据。Stream 并不存储数据&#xff0c;而是按需计算数据。Stream 操作有两个重要特性&#xff1a; 流水线操作 (Pipelining)&#xff1a;Stream 操作可以链式调用&#xff0c;形成一个流水线&…

springboot项目的打包问题(常用)

在java的日常开发中&#xff0c;离不开项目的打包&#xff0c;怎么将项目打包&#xff0c;并部署到服务器&#xff0c;这是每一个java程序猿都需要会的知识点&#xff0c;我根据自己的经验写这篇文章&#xff0c;希望可以帮助到有需要的人。 知识铺垫&#xff1a;在java项目中…

第十五站:Java琥珀——持续集成与交付的自动化之路

Java作为一种广泛使用的编程语言&#xff0c;它的生态系统非常庞大和成熟&#xff0c;其中包括了持续集成与持续交付&#xff08;CI/CD&#xff09;的工具&#xff0c;这些工具对于现代软件开发至关重要。下面我将结合Java源代码&#xff0c;简要介绍Jenkins和GitLab CI/CD如何…

Compiled blocks

目录 一&#xff0c;编译块 Compiled Block 二&#xff0c;编译循环 三&#xff0c;调用编译块 Invoke 四&#xff0c;Tips and notes 一&#xff0c;编译块 Compiled Block 在几何体网络内&#xff0c;可将网络的一部分放入编译块&#xff08;compiled block&#xff09;内…

jenkins nginx自动化部署 php项目

在当今快速发展的IT领域&#xff0c;自动化部署已成为提高工作效率和减少错误的关键。Jenkins作为持续集成/持续部署&#xff08;CI/CD&#xff09;的佼佼者&#xff0c;结合Docker容器技术和PHP编程语言&#xff0c;以及Ansible自动化工具&#xff0c;可以实现高效、可靠的自动…

Node.js RESTful API

Node.js RESTful API Node.js,作为一种流行的服务器端JavaScript运行环境,因其轻量级、高效和易于学习的特点,成为了开发RESTful API的优选技术之一。RESTful API是一种广泛使用的Web服务架构风格,它利用HTTP协议的标准方法(如GET、POST、PUT、DELETE)来访问和操作数据。…

开发指南035-刷新待办

这个问题在平台上的难点在于&#xff1a;待办是在门户系统里&#xff0c;待办的处理是在另一个独立的前端工程里&#xff0c;两者是跨域关系。当然这两个系统都是同一个浏览器打开的。跨域页面通讯技术的核心是&#xff1a;消息监听。 1、门户主界面的vue页面的create中挂接消息…

JavaScript 中的 change

什么是 change 事件&#xff1f; change 事件是 HTML 表单元素的一种事件类型&#xff0c;当表单元素的值发生变化并且失去焦点时&#xff0c;该事件会被触发。常见的表单元素包括 <input>、<select> 和 <textarea>。 适用元素 <input>&#xff08;…