43:["$","title",null,{"children":"Interval Transform / Observable Plot | 1907040108 | Observable"}] 4b:[{"id":"3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","href":"https://static.observableusercontent.com/files/3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","name":"aapl.csv","type":"text/csv","lastModified":1637117397147.822,"size":92399}] 47:{"id":"7ddb92af8d1b0fb1","slug":"interval-transform-observable-plot","title":"Interval Transform / Observable Plot","thumbnail":"44373280aef2ab15467a25f07faa175bb2fcadc537bd41d55191e387028a7940","access_level":"public","create_time":"$D2021-11-17T02:49:57.147Z","update_time":"$D2021-11-17T04:16:09.930Z","view_time":null,"first_public_time":"$D2021-11-17T04:18:41.426Z","has_unpublished_edits":null,"fork":{"id":"ffdc4cfe10f27e8c","slug":"plot-interval","title":"Interval Transform / Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"78113d61fa0b7dac","login":"1907040108","name":"","avatar_url":"https://avatars-next.observableusercontent.com/939e6ac8543cf3de57c24d3c996dd9f43e3365ac037e9a35ef3261e055b963ed","tier":"starter_2024","bio":"hello everybody","followed_by_you":false,"follows_you":false},"version":176,"publish_version":176,"role":null,"authored":false,"authors":[{"type":"individual","id":"9092fa51634d9367","login":"1907040108","name":"","avatar_url":"https://avatars-next.observableusercontent.com/939e6ac8543cf3de57c24d3c996dd9f43e3365ac037e9a35ef3261e055b963ed","tier":null,"bio":"hello everybody","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"9092fa51634d9367","login":"1907040108","name":"","avatar_url":"https://avatars-next.observableusercontent.com/939e6ac8543cf3de57c24d3c996dd9f43e3365ac037e9a35ef3261e055b963ed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interval Transform / Observable Plot","cells":[{"id":0,"value":"

Interval Transform / Observable Plot

Observable Plot › Transforms › Interval · API

\n\n# Plot: Interval\n\n区间变换将离散的 *值* 转换为区间 [*start*, *stop*]。例如，如果 *value* 是一个时刻，则间隔转换可以返回 UTC 午夜的 *start* 和第二天 UTC 午夜的 *stop*。区间变换最常用于时间数据的“条形”图表，需要 [rects](/@observablehq/plot-rect) 而不是 [bars](/@observablehq/plot-bar)，因为时间是连续的，不是离散的。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"例如，下面为 Apple 股票交易量的条形图。因为使用了条形，*x* 是序数。并且由于没有指定序数值的规律性（*即*，因为 Plot 无法知道这是日常数据），每个不同的值都必须有自己的标签，从而导致拥挤。如果丢失数据，就很难发现。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"aapl = (await FileAttachment(\"aapl.csv\").csv({typed: true})).slice(-40)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"Plot.plot({\n marginBottom: 80,\n x: {\n tickRotate: -90,\n label: null\n },\n y: {\n grid: true,\n transform: d => d / 1e6,\n label: \"↑ Daily trade volume (millions)\"\n },\n marks: [\n Plot.barY(aapl, {x: \"Date\", y: \"Volume\"}),\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":63,"value":"相比之下，具有间隔变换和 [d3.utcDay 时间间隔](https://github.com/d3/d3-time) 的矩形产生时间 *x*。使 Plot 以有意义的间隔计算刻度（这里是每周边界，星期日的 UTC 午夜）。此外，这并不是真正的每日数据——它缺少股市休市时的周末和假期。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"Plot.plot({\n y: {\n grid: true,\n transform: d => d / 1e6,\n label: \"↑ Daily trade volume (millions)\"\n },\n marks: [\n Plot.rectY(aapl, {x: \"Date\", interval: d3.utcDay, y: \"Volume\"}),\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":111,"value":"虽然间隔变换最常与 D3 时间间隔一起使用，但任何实现地板和偏移方法的对象都可以使用。例如，下面是从周五延伸到周末的自定义时间间隔。间隔也可以指定为数字 *n*，在这种情况下，*x1* 和 *x2* 被视为 *n* 括号 *x* 的两个连续倍数。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"customInterval = d3.utcDay.filter(d => d.getUTCDay() !== 0 && d.getUTCDay() !== 6)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"value = new Date","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"interval = [\n customInterval.floor(value), // start\n customInterval.offset(customInterval.floor(value)) // stop\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"Plot.plot({\n y: {\n grid: true,\n transform: d => d / 1e6,\n label: \"↑ Daily trade volume (millions)\"\n },\n marks: [\n Plot.rectY(aapl, {x: \"Date\", interval: customInterval, y: \"Volume\"}),\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":102,"value":"区间变换也可以与 barY 一起使用，将离散的 *y* 值转换为区间 [*y1*, *y2*]，类似地与 barX 一起使用，将 *x* 转换为 [*x1*, *x2 *]。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"Plot.plot({\n marginBottom: 80,\n x: {\n tickRotate: -90,\n label: null\n },\n y: {\n grid: true,\n transform: d => d / 1e6,\n label: \"↑ Daily trade volume (millions)\"\n },\n marks: [\n Plot.barY(aapl, {x: \"Date\", y: \"Volume\", interval: 1e7}),\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":19,"value":"区间变换不是独立变换，而是带有[rect](/@observablehq/plot-rect), [bar](/@observablehq/plot-bar), and [rule](/@observablehq/plot-rule) 标记.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"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":"$W4b","stdlib":"1"}} 42:null