45:["$","title",null,{"children":"Line Mark / Observable Plot | 1907040202 | Observable"}] 4d:[{"id":"7ffb89c1408eeefdab3eb2a8f782ab2ac2bfbffc96fa5fa482bb766a5440edcb1ef1d61a1e77ae5bbf1578c0b100ccdd4b15e13e9a367b096368806993fca486","href":"https://static.observableusercontent.com/files/7ffb89c1408eeefdab3eb2a8f782ab2ac2bfbffc96fa5fa482bb766a5440edcb1ef1d61a1e77ae5bbf1578c0b100ccdd4b15e13e9a367b096368806993fca486","name":"sf-temperatures.csv","type":"text/csv","lastModified":1637551522901.319,"size":15106},{"id":"c56b9e232d72bf1df96ca3eeca37e29e811adb72f49d943659a0006c015e74d2c429186d9dca251060784f364eb2a16fd39584695d523588bdcb87e4d9eac650","href":"https://static.observableusercontent.com/files/c56b9e232d72bf1df96ca3eeca37e29e811adb72f49d943659a0006c015e74d2c429186d9dca251060784f364eb2a16fd39584695d523588bdcb87e4d9eac650","name":"IBM.csv","type":"text/csv","lastModified":1637551522901.319,"size":93315},{"id":"51ef8c06edd5d139385ad9477c0a42cbf0152f5a4facf30a52d5eaa3ce4debecf1114c4a51199e734274e4411ec8149ffdd0d094cd334095cf8f2a004fc90d44","href":"https://static.observableusercontent.com/files/51ef8c06edd5d139385ad9477c0a42cbf0152f5a4facf30a52d5eaa3ce4debecf1114c4a51199e734274e4411ec8149ffdd0d094cd334095cf8f2a004fc90d44","name":"AMZN.csv","type":"text/csv","lastModified":1637551522901.319,"size":94124},{"id":"3ca44f93993f84575ab5461b4097d37b814438266e8cfe8774f70882f49bb289143c190963a158e8dc886989433af1161798ba76f2f4b36d17cc7150cba94477","href":"https://static.observableusercontent.com/files/3ca44f93993f84575ab5461b4097d37b814438266e8cfe8774f70882f49bb289143c190963a158e8dc886989433af1161798ba76f2f4b36d17cc7150cba94477","name":"GOOG.csv","type":"text/csv","lastModified":1637551522901.319,"size":93857},{"id":"a139d402230eaac422551e10fd6785ffa6fc986abe2648574a7361c1d93e15a686aee8ab7bfd6105bc1ee3fd3a33c6a1a6683963607ffe71171c325a6e476737","href":"https://static.observableusercontent.com/files/a139d402230eaac422551e10fd6785ffa6fc986abe2648574a7361c1d93e15a686aee8ab7bfd6105bc1ee3fd3a33c6a1a6683963607ffe71171c325a6e476737","name":"bls-metro-unemployment.csv","type":"text/csv","lastModified":1637551522901.319,"size":406211},{"id":"f41c1a1f4d1361c3738d427f1bbdbfaa9e5c651f8bec0902b876bda70ed1801a5aa8f487f53b2cd9bfa94fc40b874e54f4659e58d88044cdde1919cd5eebe8ac","href":"https://static.observableusercontent.com/files/f41c1a1f4d1361c3738d427f1bbdbfaa9e5c651f8bec0902b876bda70ed1801a5aa8f487f53b2cd9bfa94fc40b874e54f4659e58d88044cdde1919cd5eebe8ac","name":"driving.csv","type":"text/csv","lastModified":1637551522901.319,"size":1546},{"id":"48e833deefb41ad0ee75baa0f970b963596c5f63a9347bcd4926c4b484fd79f34513af58c1ef8f287677cb8c00ad0b65af16d20dc4a18c56e47b9ced0612c2cb","href":"https://static.observableusercontent.com/files/48e833deefb41ad0ee75baa0f970b963596c5f63a9347bcd4926c4b484fd79f34513af58c1ef8f287677cb8c00ad0b65af16d20dc4a18c56e47b9ced0612c2cb","name":"tdf-stage-8-2017.csv","type":"text/csv","lastModified":1637551522901.319,"size":17497},{"id":"3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","href":"https://static.observableusercontent.com/files/3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","name":"aapl.csv","type":"text/csv","lastModified":1637551522901.319,"size":92399}] 49:{"id":"5c22f859af7c9ddd","slug":"line-mark-observable-plot","title":"Line Mark / Observable Plot","thumbnail":"ff16b96e65e9842a543d42b00422649d1668a55ed8179d59279dab8e16176802","access_level":"public","create_time":"$D2021-11-22T03:25:22.901Z","update_time":"$D2021-11-22T10:03:48.265Z","view_time":null,"first_public_time":"$D2021-11-22T10:04:03.217Z","has_unpublished_edits":null,"fork":{"id":"73aba1d26c33f35f","slug":"plot-line","title":"Line Mark / Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ab56f65a3c59a775","login":"1907040202","name":"","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1010,"publish_version":1010,"role":null,"authored":false,"authors":[{"type":"individual","id":"422dae94408264fe","login":"1907040202","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"422dae94408264fe","login":"1907040202","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Line Mark / Observable Plot","cells":[{"id":0,"value":"md`

Line Mark / Observable Plot

Observable Plot › Marks › Line · API

\n\n# Plot: Line\n\n\n线标记像折线图一样绘制二维线。它与区域标记[area mark](/@observablehq/plot-area)密切相关。例如，下面是苹果股票收盘价的折线图。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"aapl = FileAttachment(\"aapl.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.line(aapl, {x: \"Date\", y: \"Close\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"md`如果未定义 x 和 y 通道，则行标记假定数据是点 [[x₁, y₁], [x₂, y₂], ...] 的可迭代对象，允许进行速记。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"points = aapl.map(d => [d.Date, d.Close])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"Plot.plot({\n marks: [\n Plot.line(points)\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"md`\n**lineY** 标记提供 x = index 和 y = identity 的默认通道定义，让我们可以将数字数组作为数据传递。（**lineX** 标记默认为向上↑而不是向右→ 提供 x = identity和 y = index。）下面，使用 [d3.cumsum](/@d3/d3-cumsum) 和 [d3.randomNormal](/@d3/d3-random) 进行随机游走。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"Plot.plot({\n x: {\n axis: null\n },\n marks: [\n Plot.lineY(d3.cumsum({length: 600}, d3.randomNormal()))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"md`\n线中的点按输入顺序连接：第一个点连接到第二个点，第二个点连接到第三个点，依此类推。通常这意味着应按时间顺序对行数据进行排序。如果未排序的数据给图造成混乱，可以尝试排序转换来解决问题。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.line(d3.shuffle(aapl.slice(0, 100)), {\n // sort: \"Date\", // uncomment to fix\n x: \"Date\",\n y: \"Close\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"md`虽然折线图的 x-scale 通常代表时间，但也不是必须的。例如，我们可以绘制环法自行车赛赛段的海拔剖面图（想象一下骑行 160 公里后开始攀登是多么累人！）。 ⛰🚴💦`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"tdf = FileAttachment(\"tdf-stage-8-2017.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"Plot.plot({\n x: {\n label: \"Distance from stage start (km) →\"\n },\n y: {\n label: \"↑ Elevation (m)\",\n grid: true\n },\n marks: [\n Plot.line(tdf, {x: \"distance\", y: \"elevation\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"md`\n也没有必须要求 y 依赖于 x；线也可用于连接散点图以显示两个独立（但通常相关）的变量。（另见相位图[phase plots](https://en.wikipedia.org/wiki/Phase_portrait)。）`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"driving = FileAttachment(\"driving.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"Plot.plot({\n inset: 10,\n grid: true,\n x: {\n label: \"Miles driven (per person-year) →\"\n },\n y: {\n label: \"↑ Cost of gasoline ($ per gallon)\"\n },\n marks: [\n Plot.line(driving, {x: \"miles\", y: \"gas\", curve: \"catmull-rom\"}),\n Plot.dot(driving, {x: \"miles\", y: \"gas\", fill: \"currentColor\"}),\n Plot.text(driving, {filter: d => d.year % 5 === 0, x: \"miles\", y: \"gas\", text: \"year\", dy: -6})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`要绘制多条线，请使用 z 通道将[tidy data](https://r4ds.had.co.nz/tidy-data.html)分组为系列。例如，下图显示了美国劳工统计局各个都市区的失业率； z 值是地铁分区名称。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"bls = FileAttachment(\"bls-metro-unemployment.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ Unemployment (%)\"\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(bls, {x: \"date\", y: \"unemployment\", z: \"division\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md`如果数据尚不整洁，尝试使用 [*array*.flatMap](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap)。下面，我们为其他股票加载额外的 CSV 文件以比较它们的表现。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"goog = FileAttachment(\"GOOG.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"amzn = FileAttachment(\"AMZN.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"ibm = FileAttachment(\"IBM.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"stocks = [[\"AAPL\", aapl], [\"AMZN\", amzn], [\"GOOG\", goog], [\"IBM\", ibm]]\n .flatMap(([Symbol, data]) => data.map(d => ({Symbol, ...d})))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"md`如果指定了stroke（或fill）编码，则 z 属性默认为相同的，自动按相同的属性对系列进行分组。因此，stroke 和 z 通常都是有序的或分类的。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"Plot.plot({\n style: \"overflow: visible;\",\n y: {\n type: \"log\",\n grid: true,\n label: \"↑ Change in price (%)\",\n tickFormat: formatChange\n },\n marks: [\n Plot.ruleY([1]),\n Plot.line(stocks, Plot.normalizeY({\n x: \"Date\", \n y: \"Close\",\n stroke: \"Symbol\"\n })),\n Plot.text(stocks, Plot.selectLast(Plot.normalizeY({\n x: \"Date\",\n y: \"Close\",\n z: \"Symbol\",\n text: \"Symbol\",\n textAnchor: \"start\",\n dx: 3\n })))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"md`上面， Plot.normalizeY 变换相对于其初始值对每个时间序列 (z) 进行标准化，而 Plot.selectLast 变换提取最后一个点进行标记。自定义刻度格式将倍数转换为百分比变化（例如，1.6× = +60%）。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"formatChange = {\n const format = d3.format(\"+d\");\n return x => format((x - 1) * 100);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"md`线标记不支持变色线。如果线在系列内变化，则每个系列的第一个值决定颜色。建议选择与给定 z 一致的线的颜色。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"Plot.plot({\n x: {\n label: null\n },\n y: {\n grid: true,\n label: \"↑ Unemployment (%)\"\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(bls, {\n x: \"date\",\n y: \"unemployment\",\n z: \"division\",\n stroke: \"unemployment\" // varies within z; not recommended!\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"md`颜色编码还可用于突出特定系列，比如强调密歇根州的高失业率。当highlight返回false时，对应的线为灰色；当它返回 true 时，线是红色的。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"function highlight(d) {\n return /, MI /.test(d.division);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ Unemployment (%)\"\n },\n color: {\n domain: [false, true],\n range: [\"#ccc\", \"red\"]\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(bls, {\n x: \"date\",\n y: \"unemployment\",\n z: \"division\",\n sort: highlight,\n stroke: highlight\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"md`使用 z 时，按输入顺序绘制线条。上面的排序转换将红线置于灰色线之上以提高可读性。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"md`作为 z 的替代方法，我们可以使用多个标记渲染多条线。这允许了为每一行选择不同的选项。例如，下面我们使用窗口变换绘制了旧金山温带地区每日高点和低点的 14 天移动平均线。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"sftemps = FileAttachment(\"sf-temperatures.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ Temperature (°F)\"\n },\n marks: [\n Plot.line(sftemps, Plot.windowY({k: 14, x: \"date\", y: \"low\", stroke: \"#4e79a7\"})),\n Plot.line(sftemps, Plot.windowY({k: 14, x: \"date\", y: \"high\", stroke: \"#e15759\"})),\n Plot.ruleY([32]) // freezing\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`如果某些 x 或 y 通道值未定义（或 null 或 NaN），则相邻点之间将出现间隙。为了演示，下面我们将每年前三个月的每日收盘价设置为 NaN。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"someCloses = aapl.map(d => d.Date.getUTCMonth() < 3 ? NaN : d.Close)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.lineY(aapl, {x: \"Date\", y: someCloses})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"md`Supplying undefined values is not the same as filtering the data: the latter will interpolate between the data points. Observe the conspicuous straight lines below!\n提供未定义的值与过滤数据不同：后者将在数据点之间进行插值。观察下面显眼的直线。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"someAapl = aapl.filter(d => d.Date.getUTCMonth() >= 3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.lineY(someAapl, {x: \"Date\", y: \"Close\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"md`插值由曲线属性控制。默认曲线是线性的，它在相邻点对之间绘制直线段。阶梯曲线非常适合强调值发生变化时，而基数曲线和 Catmull-Rom 曲线非常适合平滑。有关曲线的更多信息，请参阅 [D3 documentation](/@d3/curves)。在下面的失业建筑工人图中，可以尝试选择不同的曲线。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"viewof curve = Inputs.select([\n \"linear\",\n \"step\",\n \"step-after\",\n \"step-before\",\n // \"linear-closed\",\n \"basis\",\n // \"basis-closed\",\n // \"basis-open\",\n // \"bundle\",\n \"cardinal\",\n // \"cardinal-closed\",\n // \"cardinal-open\",\n \"catmull-rom\",\n // \"catmull-rom-closed\",\n // \"catmull-rom-open\",\n \"monotone-x\",\n // \"monotone-y\",\n \"bump-x\",\n // \"bump-y\",\n \"natural\",\n], {label: \"Curve\", value: \"step\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"Plot.plot({\n marks: [\n Plot.lineY(gary, {x: \"date\", y: \"unemployment\", curve, strokeWidth: 1})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"gary = bls.filter(d => d.division === \"Gary, IN Met Div\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":900,"value":"md`Next \nAPI Reference`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 44:null