2b:null 2c:["$","title",null,{"children":"Line chart, missing data | Benbinbin | Observable"}] 31:Tf9e,chart = { // 设置一些关于尺寸的参数 const width = 928; const height = 500; const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 40; /** * * 构建比例尺 * */ // 设置横坐标轴的比例尺 const x = d3.scaleUtc(d3.extent(aapl, d => d.date), [marginLeft, width - marginRight]); // 设置纵坐标轴的比例尺 const y = d3.scaleLinear([0, d3.max(aapl, d => d.close)], [height - marginBottom, marginTop]); /** * * 创建 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; height: intrinsic;"); /** * * 绘制坐标轴 * */ // 绘制横坐标轴 svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)); // 绘制纵坐标轴，并添加网格参考线和坐标轴注释信息 svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).ticks(height / 40)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑ Daily close ($)")); /** * * 绘制折线图内的线段 * */ // 使用方法 d3.line() 创建一个线段生成器 const line = d3.line() // 💡 调用线段生成器方法 line.defined() 设置数据完整性检验函数 // 该函数会在调用线段生成器时，为数组中的每一个元素都执行一次，返回布尔值，以判断该元素的数据是否完整 // 该函数也是有三个入参，当前的元素 `d`，该元素在数组中的索引 `i`，整个数组 `data` // 当函数返回 true 时，线段生成器就会执行下一步（调用坐标读取函数），最后生成该元素相应的坐标数据 // 当函数返回 false 时，该元素就会就会跳过，当前线段就会截止，并在下一个有定义的元素再开始绘制，反映在图上就是一段段分离的线段 // 具体可以参考官方文档 https://d3js.org/d3-shape/line#line_defined // 或这一篇笔记 https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-shape#线段生成器-lines // 这里通过判断数据点的属性 d.close（收盘价）是否为 NaN 来判定该数据是否缺失 .defined(d => !isNaN(d.close)) // 设置横坐标读取函数 .x(d => x(d.date)) .y(d => y(d.close)); // 💡 先绘制灰色的线段 svg.append("path") .attr("fill", "none") .attr("stroke", "#ccc") .attr("stroke-width", 1.5) .attr("d", line(aaplMissing.filter(d => !isNaN(d.close)))); // 其实以上的操作绘制了一个完整的折线图，由于过滤掉缺失的数据点，所以可以绘制出了一个完整（无缺口）的折线图 // 由于 **线性插值法 linear interpolation** 是线段生成器在绘制线段时所采用的默认方法，所以对于那些缺失数据的位置，通过连接左右存在的完整点，绘制出的「模拟」线段来填补缺口 // 再绘制蓝色的线段（完整性的数据点） svg.append("path") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("d", line(aaplMissing)); // 由于含有缺失数据，所以绘制出含有缺口的折线图 // 蓝色折线图覆盖（重叠）在前面所绘制的灰色折线图上，所以最终的效果是在缺口位置由灰色的线段填补 return svg.node(); }32:[{"id":"de259092d525c13bd10926eaf7add45b15f2771a8b39bc541a5bba1e0206add4880eb1d876be8df469328a85243b7d813a91feb8cc4966de582dc02e5f8609b7","href":"https://static.observableusercontent.com/files/de259092d525c13bd10926eaf7add45b15f2771a8b39bc541a5bba1e0206add4880eb1d876be8df469328a85243b7d813a91feb8cc4966de582dc02e5f8609b7","name":"aapl.csv","type":"application/octet-stream","lastModified":1693293602446.874,"size":22707}] 2f:{"id":"be93414c4bbc00ee","slug":"line-chart-missing-data","title":"Line chart, missing data","thumbnail":"518e1a90442d7f30a896989f20ee1c2dcbba3f8ded54b79310cc50b59ecd87de","access_level":"public","create_time":"$D2023-08-29T07:20:02.446Z","update_time":"$D2024-03-18T11:02:19.856Z","view_time":null,"first_public_time":"$D2023-08-29T07:20:02.446Z","fork":{"id":"3a38b0f430143e21","slug":"line-chart-missing-data/2","title":"Line chart, missing data","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":"starter_2024"},"version":391,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf8a59a391159895","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":null}],"members":[{"type":"individual","id":"cf8a59a391159895","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":null,"role":"editor"}],"comments":[{"id":"175f186d559fbbcd","reply_to_id":null,"content":"📢 由于该折线图是基于另一个静态折线图进行修改而成的，在代码上大部分都是相同的，只是对原始数据进行调整，并设置了数据完整性检验函数\n\n所以这个 Notebook 只针对其中 💡 变化的部分进行标注，可以结合另一个静态折线图 https://observablehq.com/@benbinbin/line-chart 对照着看，就可以得出逐行代码注释","create_time":"$D2023-08-29T08:15:02.147Z","update_time":"$D2023-11-06T13:37:05.397Z","resolved":false,"user":{"type":"individual","id":"cf8a59a391159895","login":"benbinbin","name":"Benbinbin","avatar_url":"https://avatars-next.observableusercontent.com/a7b4db79ed7370d2e2eceb24cb23938e43bee081e330b61ebda110c76ec95546","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"f94d12fc57537f9f","slug":"line-chart","title":"Line Chart","owner":{"id":"c1515c64803515f3","login":"benbinbin","name":"Benbinbin"}},"type":"notebook","body":{"title":"Line chart, missing data","cells":[{"id":1,"value":"

Line chart, missing data

D3 › Gallery

\n\n# Line chart, missing data\n\n该折线图是基于另一个[静态折线图](/@d3/line-chart/2)进行修改而成的，通过调用线段生成器方法 [*line*.defined](https://github.com/d3/d3-shape/blob/master/README.md#line_defined) 设置数据完整性检验，该检验函数会将值为 `NaN` 和 `undefined` 的数据点视为**数据缺失**。\n\nD3 会在折线图上数据缺失的数据点的相应位置留有 **「缺口」 gap**\n\n而在该折线图中，对于「缺口」部分又使用线性插值 linear interpolation（线段生成器在绘制线段时所采用的默认方法）绘制了灰色的线段，以进行填补\n\n数据来源：[Yahoo Finance](https://finance.yahoo.com/lookup)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":29,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"aapl = FileAttachment(\"aapl.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":350,"value":"// 💡 遍历 aapl 数组的每一个元素，修改数据点（对象）的属性 close 的值，以手动模拟数据缺失的情况\n// 当数据点所对应的日期的月份小于三月份（包含），则收盘价改为 NaN；否则就采用原始值\n// 📢 由于 JS 的日期中，月份是按 0 开始算起的，所以 1、2、3 月份是满足以下的判断条件 d.date.getUTCMonth() < 3\naaplMissing = aapl.map(d => ({...d, close: d.date.getUTCMonth() < 3 ? NaN : d.close})) // simulate gaps","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"