【D3.js in Action 3 精译_039】4.3 D3 面积图的绘制方法及其边界标签的添加

当前内容所在位置:

  • 第四章 直线、曲线与弧线的绘制 ✔️
    • 4.1 坐标轴的创建(上篇)
      • 4.1.1 D3 中的边距约定(中篇)
      • 4.1.2 坐标轴的生成(中篇)
        • 4.1.2.1 比例尺的声明(中篇)
        • 4.1.2.2 坐标轴的添加(下篇)
        • 4.1.2.3 轴标签的添加(下篇)
    • 4.2 D3 折线图的绘制
      • 4.2.1 直线生成工具的使用
      • 4.2.2 对数据点作曲线插值处理
    • 4.3 D3 面积图的绘制 ✔️
      • 4.3.1 面积图生成工具的用法 ✔️
      • 4.3.2 用标签提高图表的可读性 ✔️
    • 4.4 D3 弧形图的绘制

文章目录

    • 4.3 面积图的绘制 Drawing an area
      • 4.3.1 面积图生成工具的用法 Using the area generator
      • 4.3.2 用标签提高图表的可读性 Enhancing readability with labels

《D3.js in Action》全新第三版封面

《D3.js in Action》全新第三版封面

译者按
由于 D3 的折线图和面积图在实现方式上相似度极高,这一篇就趁热打铁,将示例折线图剩下的面积图部分一并学完。看似复杂的面积图在作者精心绘制的示意图的帮助下变得非常简单(至少比我的其他专栏要容易很多),曾在 MSOffice 中盛行的“字不如表、表不如图”的说法用到 D3 数据可视化上依然适用。如果早几年出现这样的扫盲级 D3 参考书,如今国内数据可视化领域 ECharts 一手遮天的局面没准还真能被打破。一起学起来吧!

4.3 面积图的绘制 Drawing an area

本节将实现示例折线图后方的面积图部分,用于展示每个日期最低气温与最高气温的波动范围。D3 绘制面积图的方法与绘制折线图类似,也是通过 SVG 的路径元素来创建。D3 还专门提供了面积图生成工具函数 d3.area() 来处理路径 d 属性的复杂运算。

动手绘制前还需要注意一点:示例中的面积图位于折线图的 后方(behind the line chart)。鉴于屏幕元素的渲染顺序与添加到 SVG 父容器的元素顺序保持一致,因此该面积区域的实现代码应该添加到创建折线图的代码 前面

4.3.1 面积图生成工具的用法 Using the area generator

首先声明一个面积图生成工具函数(area generator function),并赋给常量 areaGenerator。根据以下示例代码,面积生成工具至少需要三个访问器函数(accessor functions)。一是 x(),用于计算数据点的水平坐标,与直线生成工具完全相同;垂直方向上则略有不同,数据点从一组变为了两组,分别对应面积区域的上下边缘,因此需要设置 y0()y1() 两个访问器函数。注意,示例面积图中的上下边缘数据点具有相同的水平坐标:

const areaGenerator = d3.area().x(d => xScale(d.date)).y0(d => yScale(d.min_temp_F)).y1(d => yScale(d.max_temp_F));

图 4.19 生动直观地展示了面积区域的下边界和上边界情况,以及面积生成工具对相关数据的计算处理过程:

图 4.19 面积生成工具 d3.area() 与三个及更多访问器函数的组合用法示意图。绘制最高最低气温构成的温差区域,需要用到 x()、y0() 和 y1(),分别用于计算各数据点的水平坐标、面积区下边界(即当日最低气温)的垂直坐标、以及面积区上边界(即当日最高气温)的垂直坐标。

【图 4.19 面积生成工具 d3.area() 与三个及更多访问器函数的组合用法示意图。绘制最高最低气温构成的温差区域,需要用到 x()、y0() 和 y1(),分别用于计算各数据点的水平坐标、面积区下边界(即当日最低气温)的垂直坐标、以及面积区上边界(即当日最高气温)的垂直坐标。】

与折线图类似,我们同样可以在面积生成工具函数上链式调用访问器函数 curve() 来对面积图的上下边缘作曲线插值处理,这里还是沿用上一节介绍过的 D3 内置插值函数 d3.curveCatmullRom,如以下代码所示:

const areaGenerator = d3.area().x(d => xScale(d.date)).y0(d => yScale(d.min_temp_F)).y1(d => yScale(d.max_temp_F)).curve(d3.curveCatmullRom);

面积生成器准备就绪后,就可以在内部图表选择集上添加一个 SVG 路径元素。该元素的 d 属性,可以通过刚才备好的面积生成器计算得到,传入参数为数据集 data。剩下的都是一些与审美相关的属性设置:填充色通过 fill 属性实现,属性值就是前面声明过的紫红色常量 aubergine;为了让面积区域与折线部分清晰可辨,可以给面积图加一点透明度,指定其 fill-opacity 属性为 20%,最终渲染效果如图 4.20 所示。注意,颜色常量 aubergine 必须先声明再使用:

innerChart.append("path").attr("d", areaGenerator(data)).attr("fill", aubergine) // 即 "#75485E".attr("fill-opacity", 0.2);

图 4.20 由折线图表示的日均气温与面积图表示的当日气温波动范围的绘制效果图

【图 4.20 由折线图表示的日均气温与面积图表示的当日气温波动范围的绘制效果图】

可以看出,D3 面积图的绘制过程与折线图的绘制十分类似。二者的主要区别在于,折线图只有一组数据点,用直线段进行绘制;而面积图需要处理上下两个边缘,每个边缘对应一组数据点。这就是直线生成器函数只需要两个访问器函数(即 x()y())、而面积生成器需要至少三个访问器函数(本例即为 x()y0()y1())的根本原因,如图 4.21 所示:

图 4.21 D3 面积图的绘制步骤

【图 4.21 D3 面积图的绘制步骤】

4.3.2 用标签提高图表的可读性 Enhancing readability with labels

至此,我们实现了 2021 年纽约市日均气温的折线图的绘制,并同步展示了当日最低气温与最高气温的变化区域,效果看上去已经很不错了;但我们还需要确保看到这张图表的人们能够轻松准确地理解折线与面积的含义。添加图表标签(label)就是个不错的想法。

前面学过,图表标签不过是放置在可视化作品里的 SVG 文本元素。在本例中,不妨创建三个标签,分别用于表示折线图末尾的平均气温、位置靠下的当日最低气温、以及靠上放置的当日最高气温。

先从折线图标签开始。先将 SVG 文本元素添加到内部图表选择集中,然后调用 text() 方法设置标签文本为 "Average temperature"(即“平均气温”);接着通过 xy 属性设置标签在绘图区内的坐标。

我们希望标签位于折线图末尾,也就是最后一个数据点的后面;其水平坐标可以通过先前声明的常量 lastDate 由水平比例尺函数 xScale() 算得;另外可以再给标签一个 10px 的间距。

而垂直坐标的计算还需要一个当天的平均气温值,可以先通过 data[data.length - 1] 获取到最后一个数据点;然后利用句点标识符拿到对应的平均气温;接着再调用垂直比例尺函数 yScale() 算得该数据点的垂直坐标。最后复用颜色常量 aubergine,通过 fill 属性来指定标签文本的颜色,如以下代码所示:

innerChart.append("text").text("Average temperature").attr("x", xScale(lastDate) + 10).attr("y", yScale(data[data.length - 1].avg_temp_F)).attr("fill", aubergine);

如果保存项目并在浏览器中查看效果,会发现文本标签的底边与折线图最后一个数据点的中心垂直对齐了。默认情况下,SVG 文本元素的基准线(baseline)位于文本的底边位置,如图 4.22 (左图)所示。这时可以使用 dominant-baseline 属性来手动修改。如以下代码所示,将该属性值设为 middle,基准线就改到了文本的中心位置:

innerChart.append("text").text("Average temperature").attr("x", xScale(lastDate) + 10).attr("y", yScale(data[data.length - 1].avg_temp_F)).attr("dominant-baseline", "middle").attr("fill", aubergine);

图 4.22 SVG 文本元素的 y 属性可设置其基准线在垂直方向的位置,默认位置在文本底边。可通过 dominant-baseline 进行修改,值为 middle 时基准线与文本中心对齐;值为 hanging 时基准线则位于文本顶部。

【图 4.22 SVG 文本元素的 y 属性可设置其基准线在垂直方向的位置,默认位置在文本底边。可通过 dominant-baseline 进行修改,值为 middle 时基准线与文本中心对齐;值为 hanging 时基准线则位于文本顶部。】

接着再给面积图的下边界添加一个文本标签,代表最低温度的变化趋势。具体做法与刚才一样,先添加一个 SVG 文本元素,并指定文本内容为 "Minimum temperature",即最低气温。

至于标签的坐标方位,可以参考最后一个下凹点(downward protuberance),即下边缘倒数第三个数据点。将该位置的数据值传入垂直坐标尺函数,算得其垂直坐标,然后再下移 20px、右移 13px。这些位移量都是通过在页面上不断尝试不同的位置得到的;借助浏览器的检查工具(inspector tool)是处理这类微调操作的绝佳工具。注意,此时文本标签的 dominant-baseline 属性值改为了 hanging,如图 4.22 所示,表示 y 属性值是相对于文本的顶部而言的。

最后,根据以下代码片段,就能再给图表标签新增一条指示线,将面积图的下凹拐点与标签进行关联,进一步明确标签所代表的含义,如图 4.23 所示。同理,可以使用比例尺分别计算指示线的 x1y1x2y2 属性值,最终确定出线段的起点和终点位置:

innerChart.append("text").text("Minimum temperature").attr("x", xScale(data[data.length - 3].date) + 13).attr("y", yScale(data[data.length - 3].min_temp_F) + 20).attr("alignment-baseline", "hanging").attr("fill", aubergine);
innerChart.append("line").attr("x1", xScale(data[data.length - 3].date)).attr("y1", yScale(data[data.length - 3].min_temp_F) + 3).attr("x2", xScale(data[data.length - 3].date) + 10).attr("y2", yScale(data[data.length - 3].min_temp_F) + 20).attr("stroke", aubergine).attr("stroke-width", 2);

同理也可以给面积区的上边缘添加类似的文本标签,用以表示当日最高气温的变化情况。上边缘标签的定位可以参考其倒数第四个数据点的上凸拐点。然后用相同的手法在标签和上凸拐点间绘制一条指示线,如以下代码片段所示:

innerChart.append("text").text("Maximum temperature").attr("x", xScale(data[data.length - 4].date) + 13).attr("y", yScale(data[data.length - 4].max_temp_F) - 20).attr("fill", aubergine);
innerChart.append("line").attr("x1", xScale(data[data.length - 4].date)).attr("y1", yScale(data[data.length - 4].max_temp_F) - 3).attr("x2", xScale(data[data.length - 4].date) + 10).attr("y2", yScale(data[data.length - 4].max_temp_F) - 20).attr("stroke", aubergine).attr("stroke-width", 2);

这样就完成了折线图部分的绘制:

图 4.23 绘制完毕的 2021 年纽约市全年日均气温及其变化趋势效果图

【图 4.23 绘制完毕的 2021 年纽约市全年日均气温及其变化趋势效果图】



另附:专栏文章连载期间 完全免费,后续 不排除 调整为收费专栏。对 D3.js 感兴趣、或者想要从零开始彻底掌握 D3 的朋友们强烈建议及时关注本专栏,一起学习交流,共同进步!

目前译好的其他章节内容如下(可进入专栏查看详情):

  • 第一部分 D3.js 基础知识
    • 第一章 D3.js 简介(已完结)
      • 1.1 何为 D3.js?
      • 1.2 D3 生态系统——入门须知
      • 1.3 数据可视化最佳实践(上)
      • 1.3 数据可视化最佳实践(下)
      • 1.4 本章小结
    • 第二章 DOM 的操作方法(已完结)
      • 2.1 第一个 D3 可视化图表
      • 2.2 环境准备
      • 2.3 用 D3 选中页面元素
      • 2.4 向选择集添加元素
      • 2.5 用 D3 设置与修改元素属性
      • 2.6 用 D3 设置与修改元素样式
      • 2.7 本章小结
    • 第三章 数据的处理(已完结)
      • 3.1 理解数据
      • 3.2 准备数据
      • 3.3 将数据绑定到 DOM 元素
        • 3.3.1 利用数据给 DOM 属性动态赋值
      • 3.4 让数据适应屏幕
        • 3.4.1 比例尺简介(上篇)
        • 3.4.2 线性比例尺(中篇)
          • 3.4.2.1 基于 Mocha 测试 D3 线性比例尺(DIY 实战)
        • 3.4.3 分段比例尺(下篇)
          • 3.4.3.1 使用 Observable 在线绘制 D3 条形图(DIY 实战)
      • 3.5 加注图表标签(上篇)
        • 3.5.1 人物专访:Krisztina Szűcs(下篇)
      • 3.6 本章小结

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

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

相关文章

时序动作定位 | 基于层次结构潜在注意模型的弱监督动作定位(ICCV 2023)

<Weakly-Supervised Action Localization by Hierarchically-structured Latent Attention Modeling> 这篇文章的标题是《Weakly-Supervised Action Localization by Hierarchically-structured Latent Attention Modeling》,作者是Guiqin Wang等人,来自西安交通大学和…

华为交换机Vlan划分

华为交换机Vlan划分 Tip&#xff1a;一个广播域划分vlan达到隔离广播目的且不能互访。 一个广播域划分子网掩码也可以不能互访&#xff0c;但是还是在一个广播域&#xff0c;还是会发生广播风暴。 本次实验模拟交换机不同端口划分不同vlan达到隔绝广播风暴效果。 pc1 pc2分配…

[linux]docker快速入门

安装 docker官网: CentOS | Docker Docs 准备工作: 准备ConstOS7的虚拟机环境账密: root/root飞书文档: Docs 卸载旧版本 // 首先如果系统中已经存在旧的Docker&#xff0c;则先卸载 yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest…

vue echarts左右间距调整 左右空白

咱就说这样的左右间距丑不丑。。 经过调整后&#xff0c;嗯&#xff0c;好看了很多。页面也协调多了&#xff01; 直接上代码&#xff1a;添加以下配置数据&#xff1a; grid: {x: 50,y: 25,x2: 30,y2: 35 }, this.chart.setOption({width: 100%,xAxis: {show: false,type: ca…

内置函数【MySQL】

文章目录 日期函数字符串函数数学函数其他函数 日期函数 current_date函数用于获取当前的日期 mysql> select current_date(); ---------------- | current_date() | ---------------- | 2024-11-03 | ---------------- 1 row in set (0.00 sec)current_time函数用于获…

软件设计师-上午题-14 信息安全(5分)

信息安全题号一般为7-9或10-11题&#xff0c;分值一般为5分。 目录 1 防火墙 1.1 真题 2 病毒 2.1 真题 3 网络攻击 3.1 真题 4 网络安全 4.1 真题 5 杂题选讲 1 防火墙 1.1 真题 1.2009年下半年第8题 2.2013年上半年第8题 3.2014年上半年第8题 4.2011年上半年第9题…

移植 AWTK 到 纯血鸿蒙 (HarmonyOS NEXT) 系统 (9) - 编译现有的AWTK应用程序

AWTK 应用程序开发完成后&#xff0c;在配置文件中添加 harmonyos 的选项&#xff0c;通过create_project.py脚本即可生成 DevEco Studio的工程。 安装开发环境 DevEco Studio HarmonyOS 的开发工具。 Python 运行环境。 git 源码管理工具。 下载 awtk 和 awtk-harmonyos…

如何创建备份设备以简化 SQL Server 备份过程?

SQL Server 中的备份设备是什么&#xff1f; 在 SQL Server 中&#xff0c;备份设备是用于存储备份数据的物理或逻辑介质。备份设备可以是文件、设备或其他存储介质。主要类型包括&#xff1a; 文件备份设备&#xff1a;通常是本地文件系统中的一个或多个文件。可以是 .bak 文…

Dependency: androidx.webkit:webkit:1.11.0-alpha02. 问题

android studio 打包后出现这个问题 1.步骤更新topOn sdk 添加 //Admob api “com.anythink.sdk:adapter-admob:6.4.18” api “com.google.android.gms:play-services-ads:23.4.0” api "com.google.android.gms:play-services-ads:23.4.0"sdk 中会出现打包编译报错…

ubuntu 20.04 NVIDIA驱动、cuda、cuDNN安装

1. NVIDIA驱动 系统设置->软件和更新->附加驱动->选择NVIDIA驱动->应用更改。该界面会自动根据电脑上的GPU显示推荐的NVIDIA显卡驱动。 运行nvidia-smi: NVIDIA-SMI has failed because it couldnt communicate with the NVIDIA driver. Make sure that the lat…

SpringBoot监控

1、Spring Boot Actuator 监控 Spring Boot Actuator 可以帮助监控和管理 Spring Boot 应用&#xff0c;比如健康检查、审计、统计和 HTTP 追踪等。所有的这些特性可以通过 JMX 或者 HTTP endpoints 来获得。 1、Actuator 监控应用程序 启用 Actuator 的端点&#xff0c;只要…

动态规划 —— dp 问题-粉刷房子

1. 剑指offer —— 粉刷房子 题目链接&#xff1a; LCR 091. 粉刷房子 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/JEj789/description/ 2. 题目解析 根据上图可以得到costs横坐标&#xff08;行&#xff09;是房子的号数&#xff0c;红色的下标是0&…

RPA是什么,RPA有什么作用?

在数字化转型的时代背景下&#xff0c;企业面临着提高效率、降低成本和优化流程的巨大压力。RPA作为一种革新性的数字化技术&#xff0c;迅速成为企业实现这些目标的利器。那么&#xff0c;RPA究竟是什么&#xff1f;它又能为企业带来哪些实际作用呢&#xff1f;本文金智维将对…

RAG(检索增强生成)的实现流程;RAG怎么实现检索增强的

目录 RAG(检索增强生成)的实现流程 两次使用大模型:可以不同 一、数据准备阶段 二、应用阶段 RAG怎么实现检索增强的 实现方式 具体举例 RAG(检索增强生成)的实现流程 两次使用大模型:可以不同

【ddnsgo+ipv6】

ddnsgoipv6 DNS解析添加记录ddnsgo配置 DNS解析添加记录 ddnsgo配置

【手撕排序2】快速排序

&#x1f343; 如果觉得本系列文章内容还不错&#xff0c;欢迎订阅&#x1f6a9; &#x1f38a;个人主页:小编的个人主页 &#x1f380; &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐文章 ✌️ &#x1f91e; &#x1f91f; &#x1f918; &#x1f919; &#x1f448; &…

Stable Diffusion的解读(一)

Stable Diffusion的解读&#xff08;一&#xff09; 文章目录 Stable Diffusion的解读&#xff08;一&#xff09;摘要Abstract一、机器学习部分1. Stable Diffusion的早期工作1.1 从编码器谈起1.2 第一条路线&#xff1a;VAE和DDPM1.3 第二条路线&#xff1a;VQVAE1.4 路线的交…

2024年该了解的常用渲染工具

随着图形技术和计算机科学的飞速发展&#xff0c;渲染工具在多个领域中的应用越来越广泛&#xff0c;包括影视特效、建筑设计、工业设计、游戏开发等。了解并掌握一些常用的渲染工具对于设计师和艺术家来说至关重要。 一、效果图建模及渲染软件 Autodesk 3ds Max 拥有强大的建…

解决 “Error: listen EACCES: permission denied 0.0.0.0:80“ 错误

前言 在开发过程中&#xff0c;我们经常会遇到各种各样的错误。其中一个常见的错误是 Error: listen EACCES: permission denied 0.0.0.0:80。这个错误通常发生在尝试启动一个开发服务器时&#xff0c;服务器试图绑定到80端口&#xff0c;但由于权限不足而失败。本文将详细介绍…

flink 内存配置(一):设置Flink进程内存

flink 内存配置&#xff08;一&#xff09;&#xff1a;设置Flink进程内存 flink 内存配置&#xff08;二&#xff09;&#xff1a;设置TaskManager内存 flink 内存配置&#xff08;三&#xff09;&#xff1a;设置JobManager内存 flink 内存配置&#xff08;四&#xff09;…