如何在学校内网建立网站,app怎么创建,搜索引擎大全入口,网站费用怎么做分录当前内容所在位置#xff1a; 第五章 饼图布局与堆叠布局 ✔️ 5.1 饼图和环形图的创建 ✔️ 5.1.1 准备阶段#xff08;上篇#xff09;5.1.2 饼图布局生成器#xff08;中篇#xff09; ✔️5.1.3 圆弧的绘制5.1.4 数据标签的添加 文章目录 5.1.2 饼图布局生成器 The … 当前内容所在位置 第五章 饼图布局与堆叠布局 ✔️ 5.1 饼图和环形图的创建 ✔️ 5.1.1 准备阶段上篇5.1.2 饼图布局生成器中篇 ✔️5.1.3 圆弧的绘制5.1.4 数据标签的添加 文章目录 5.1.2 饼图布局生成器 The pie layout generator5.1.2.1 数据的格式化处理 Formatting the data5.1.2.2 饼图布局生成器的初始化及其调用 Initializing and calling the pie layout generator 《D3.js in Action》全新第三版封面
【译者按】看似神秘的 D3 饼图布局生成器函数在作者抽丝剥茧般的讲解和精心制作的示意图下变得非常浅显易懂。这才是真正的高手用最简单的话讲明白最核心的原理。尽管当中的 JavaScript 处理逻辑比较冗长但瑕不掩瑜。
5.1.2 饼图布局生成器 The pie layout generator
准备工作完成后就可以专注于环形图的构建了。饼图和环形图通过可视化的方式描述部分与整体之间的关系或者刻画各部分的数量相对于总量之间的数量关系。利用 D3 的饼图布局生成器我们可以根据环形图中各个部分相对于总量的百分比算出其对应的起始角和终止角。
5.1.2.1 数据的格式化处理 Formatting the data
D3 饼图生成器期望的参数类型为数字型数组。例如对于 1975 年的数据我们希望它是一个包含各种音乐格式的当年的销售额数组
const sales1975 [8061.8, 2770.4, 469.5, 0, 0, 0, 48.5];虽然这样一个简单的数组已经可以生成饼图了但我们无从得知每个数字对应的音乐格式是什么。为了补全这些信息可以将其改为对象数组其中每个对象都包含音乐格式的 ID 以及对应的年度销售额。
如下列代码清单 5.3 所示首先从数据集的 columns 属性提取音乐格式信息。例如在使用 d3.csv() 方法加载数据时D3 会将一个包含原始 CSV 数据列标题的数组添加到数据集中并允许开发者通过 data.columns 进行访问。如果将获取到的数据输出到控制台会在结果数组的末尾看到这个列标题数组如图 5.5 所示。由于只需要考虑音乐格式所以要筛选掉数组中的“年份”即 year列。 【图 5.5 从 CSV 文件获取数据时D3 会将一个列标题数组添加到原始数据集中并可通过 data.columns 访问该列标题数组】
为了制备饼图生成器需要的对象数组还需要提取待实现的年份数据然后利用 JavaScript 的 find() 方法找到当年对应的数据项再赋给常量 yearData。
接着遍历音乐格式数组为每种格式创建一个对象里面包含当前格式的 ID 以及关联年份的销售额数据。最后将该对象添加到提前声明好的 formattedData 数组中。
代码清单 5.3 对数据进行格式化处理详见 donut-chart.js 文件
const years [1975, 1995, 2013];
const formats data.columns.filter(format // 从数据 data 的 columns 属性提取出需要的音乐格式并筛选掉 “年份” 字段format ! year); years.forEach(year {...const yearData data.find(d d.year year); // 读取特定年份的数据项const formattedData []; // 初始化一个空数组作为最终的结果数组formats.forEach(format { // 遍历每一种音乐格式分别创建一个对象令其包含该格式的 ID 以及当年该音乐格式的销售额。然后将当前对象添加到结果数组。formattedData.push({ format: format, sales: yearData[format] }); }); });数据准备就绪后就得到一个如下所示的对象数组其中每个对象都包含一个音乐格式 ID 以及当前年份的销售额数据
// formattedData [{ format: vinyl, sales: 8061.8 },{ format: eight_track, sales: 2770.4 },{ format: cassette, sales: 469.5 },{ format: cd, sales: 0 },{ format: download, sales: 0 },{ format: streaming, sales: 0 },{ format: other, sales: 48.5 }];5.1.2.2 饼图布局生成器的初始化及其调用 Initializing and calling the pie layout generator
既然数据已就绪接下来就可以初始化我们的饼图布局生成器pie layout generator了用到的方法是 d3.pie()。该方法隶属于 d3-shape 模块。鉴于数据格式为一个对象数组我们需要告诉布局生成器从哪里能获取到控制圆弧长短的数值具体通过 value() 方法进行配置如下列代码片段所示。最后将该生成器赋给一个常量 pieGenerator以备后用。
const pieGenerator d3.pie().value(d d.sales);为了生成饼图布局带注解的数据只需调用刚才的生成器函数然后将格式化处理后的数据作为参数传入即可然后将得到的结果赋给另一个常量 annotatedData
const pieGenerator d3.pie().value(d d.sales);
const annotatedData pieGenerator(formattedData);饼图生成器函数返回的是一个全新的带注解的数据集里面既有对原始数据项的引用同时也添加了一些新属性attributes比如各部分的值value、当前部分的索引值index、起始角大小startAngle以及终止角大小startAngle角度值均为弧度制
// annotatedData [{data: { format: vinyl, sales: 8061.8 },value: 8061.8,index: 0,startAngle: 0,endAngle: 4.5,padAngle: 0,},...];注意代码中还包含了一个 padAngle 属性它是各环形片段间的填充角当前值为 0稍后再进行修改。关键要明白一点饼图布局生成器并不直接参与 D3 饼图的绘制它只是一个预处理环节用于计算绘制饼图各部分对应的角度值。如图 5.1 和 5.6 所示该环节通常涉及以下三个步骤
格式化数据初始化饼图布局函数调用饼图布局函数并将格式化的数据作为参数传入。稍后再利用该函数返回的带注解信息的数据集来具体绘制各段弧线。 【图 5.6 饼图布局生成器是一个预处理步骤负责生成一个包含每片段起始角、终止角在内的带注解信息的数据集。该过程通常涉及数据的格式化处理、饼图生成器函数的初始化及其调用】
中篇完 另附专栏文章连载期间 完全免费后续 不排除 调整为收费专栏。对 D3.js 感兴趣、或者想要从零开始彻底掌握 D3 的朋友们强烈建议及时关注本专栏一起学习交流共同进步
目前译好的其他章节内容如下可进入专栏查看详情 第一部分 D3.js 基础知识 第一章 D3.js 简介已完结 1.1 何为 D3.js1.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 本章小结 第四章 直线、曲线与弧线的绘制 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.4.1 D3 中的极坐标系4.4.2 圆弧生成器的使用4.4.3 圆弧形心的计算4.4.4 人物专访Francis Gagnon、Patricia Angkiriwang 和 Olivia Gélinas 4.5 本章小结
