2b:null 2c:["$","title",null,{"children":"Inline labels | Benbinbin | Observable"}] 31:T3041,chart = { // 设置一些关于尺寸的参数 const width = 928; // svg 元素的宽 const height = 500; // svg 元素的高 // margin 为前缀的参数 // 其作用是在 svg 的外周留白，构建一个显示的安全区，以便在四周显示坐标轴 const marginTop = 30; const marginRight = 50; const marginBottom = 30; const marginLeft = 30; /** * * 构建比例尺 * */ // 设置横坐标轴的比例尺 // 横坐标轴的数据是日期（时间），使用 d3.scaleUtc 构建一个时间比例尺（连续型比例尺的一种） // 该时间比例尺采用协调世界时 UTC，处于不同时区的用户也会显示同样的时间 // 具体可以参考官方文档 https://d3js.org/d3-scale/time 或 https://github.com/d3/d3-scale#time-scales // 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-scale#时间比例尺-time-scales const x = d3.scaleUtc() // 设置定义域范围 // 由于数据集 fruit 中的元素是按时间顺序进行排序的 // 所以横坐标的（时间）范围可以从数据集（数组）的第一个元素 fruit[0] 和最后一个元素 fruit[fruit.length - 1] 获取 .domain([fruit[0].date, fruit[fruit.length - 1].date]) // 设置值域范围（所映射的可视元素） // svg 元素的宽度（减去留白区域） .range([marginLeft, width - marginRight]); // 设置纵坐标轴的比例尺 // 纵坐标轴的数据是连续型的数值（水果的销量❓），使用 d3.scaleLinear 构建一个线性比例尺 const y = d3.scaleLinear() // 设置定义域范围 [0, ymax] // 从数据集的每个数据点中提取出水果相关的数值，并用 d3.max() 计算出最大值 .domain([0, d3.max(fruit, d => d.value)]) // 设置值域范围（所映射的可视元素） // svg 元素的高度（减去留白区域） .range([height - marginBottom, marginTop]); // 设置颜色比例尺 // 为不同的线段（水果类型）设置不同的配色 // 使用 d3.scaleOrdinal() 排序比例尺 Ordinal Scales 将离散型的定义域映射到离散型值域 // 具体参考官方文档 https://d3js.org/d3-scale/ordinal 或 https://github.com/d3/d3-scale/tree/main#scaleOrdinal // 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-scale#排序比例尺-ordinal-scales const color = d3.scaleOrdinal() // 设置定义域范围 // 各系列的名称，即各种水果的类型（会自动去除重复的值，所以只包括 Apple 和 Bananas 共 2 种） .domain(fruit.map(d => d.fruit)) // 设置值域范围 // 使用 D3 一种的内置 Color Scheme 配色方案 d3.schemeCategory10 // 它是一个数组，包含一些预设的颜色值，具体可以查看 👇 下一个 📝 cell // 相关模块是 https://github.com/d3/d3-scale-chromatic/ // 也可以参考官方文档 https://d3js.org/d3-scale-chromatic/categorical .range(d3.schemeCategory10); /** * * 创建 svg 容器 * */ // 返回的是一个包含 svg 元素的选择集 const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); /** * * 绘制坐标轴 * */ // 绘制横坐标轴 svg.append("g") // 通过设置 CSS 的 transform 属性将横坐标轴容器「移动」到底部 .attr("transform", `translate(0,${height - marginBottom})`) // 横轴是一个刻度值朝下的坐标轴 // 通过 axis.ticks(count) 设置刻度数量的参考值（避免刻度过多导致刻度值重叠而影响图表的可读性） // 而且将坐标轴的外侧刻度 tickSizeOuter 长度设置为 0（即取消坐标轴首尾两端的刻度） .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)); // 💡 注意以上通过方法 selection.call(axis) 的方式来调用坐标轴对象（方法） // 会将选择集中的元素传递给坐标轴对象的方法，作为第一个参数 // 以便将坐标轴在相应容器内部渲染出来 // 具体参考官方文档 https://d3js.org/d3-selection/control-flow#selection_call 或 https://github.com/d3/d3-selection#selection_call // 或这一篇文档 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-binding#其他方法 /** * * 绘制折线图内的线段 * */ // 为每个线段创建容器 const series = svg.append("g") .selectAll() // 绑定数据 // 先使用 D3 的内置方法 d3.group(iterable, ...keys) 对可迭代对象的元素进行分组转换 // 第一参数 iterable 是需要分组的可迭代对象 // 第二个参数 ...keys 是一系列返回分组依据的函数，数据集中的每个元素都会调用该函数，入参就是当前遍历的元素 d // 并返回一个 InterMap 对象（映射，键名是分组依据，相应的值是在原始数组中属于该分组的元素） // 具体可以参考官方文档 https://d3js.org/d3-array/group#group 或 https://github.com/d3/d3-array/tree/main#group // 或参考这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-data-process#转换 // 在这里是基于水果类型 d => d.fruit 对数据集 fruit 的元素进行分组 // 所以返回的 InterMap 对象会具有 2 个类别，键名是 Apple 和 Bananas，它们分别绑定一个元素 .data(d3.group(fruit, d => d.fruit)) .join("g"); // 将容器添加到

Inline labels

D3 › Gallery

\n\n# Inline labels\n\n折线内的标注\n\n该示例是一个多条线段的折线图，在每个数据点处添加了标签来显示具体的数值，以替代 *y 轴*。\n\n这个设计思路的灵感来源于 [Ann K. Emery 的 Excel 教程](https://depictdatastudio.com/how-to-place-labels-directly-through-your-line-graph-in-microsoft-excel/)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":220,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"// 📝 该 cell 只是用于演示效果\nd3.schemeCategory10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":343,"value":"// 📝 该 cell 只是用于演示效果\nawait FileAttachment(\"fruit.csv\").csv({typed: true});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":365,"value":"// 📝 该 cell 只是用于演示效果\nd3.group(fruit, d => d.fruit)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"