45:["$","title",null,{"children":"Text Mark / Observable Plot | 1907040205 | Observable"}] 4d:[{"id":"75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","href":"https://static.observableusercontent.com/files/75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","name":"alphabet.csv","type":"text/csv","lastModified":1637249786375.807,"size":275},{"id":"df346b6e60d18054eb2c5fae318ffb4bfb2f89f173cfa3ef5f8d397b8aa4b767874e9dea2595f5277ed0259fdfcefb22c2bc5703e0132f2e46d95aacb1921a35","href":"https://static.observableusercontent.com/files/df346b6e60d18054eb2c5fae318ffb4bfb2f89f173cfa3ef5f8d397b8aa4b767874e9dea2595f5277ed0259fdfcefb22c2bc5703e0132f2e46d95aacb1921a35","name":"caltrain.csv","type":"text/csv","lastModified":1637249786375.807,"size":2529},{"id":"f41c1a1f4d1361c3738d427f1bbdbfaa9e5c651f8bec0902b876bda70ed1801a5aa8f487f53b2cd9bfa94fc40b874e54f4659e58d88044cdde1919cd5eebe8ac","href":"https://static.observableusercontent.com/files/f41c1a1f4d1361c3738d427f1bbdbfaa9e5c651f8bec0902b876bda70ed1801a5aa8f487f53b2cd9bfa94fc40b874e54f4659e58d88044cdde1919cd5eebe8ac","name":"driving.csv","type":"text/csv","lastModified":1637249786375.807,"size":1546},{"id":"3e136b4525bb1d1bb50a29092c102423fd7d3a2526c07a40d92d90c95598a81dee3fdfcafb7561b132b0618adbd046dc6ff21d4c7884d1914a5fec44ff773cff","href":"https://static.observableusercontent.com/files/3e136b4525bb1d1bb50a29092c102423fd7d3a2526c07a40d92d90c95598a81dee3fdfcafb7561b132b0618adbd046dc6ff21d4c7884d1914a5fec44ff773cff","name":"travelers.csv","type":"text/csv","lastModified":1637249786375.807,"size":7836}] 49:{"id":"c7ba38a2cb496458","slug":"text-mark-observable-plot","title":"Text Mark / Observable Plot","thumbnail":"797c30071e354013ee9304529ab42b1eeae680e9a93e83dddad65fb25fbb4a9f","access_level":"public","create_time":"$D2021-11-18T15:36:26.375Z","update_time":"$D2021-11-18T15:50:00.769Z","view_time":null,"first_public_time":"$D2021-11-23T00:29:38.771Z","has_unpublished_edits":null,"fork":{"id":"cf4f2dc16a7644a4","slug":"plot-text","title":"Text Mark / Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a4b7eada444d9b53","login":"1907040205","name":"","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":331,"publish_version":331,"role":null,"authored":false,"authors":[{"type":"individual","id":"3fdc14ae238bd407","login":"1907040205","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3fdc14ae238bd407","login":"1907040205","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":"Text Mark / Observable Plot","cells":[{"id":0,"value":"md`

Text Mark / Observable Plot

Observable Plot › Marks › Text · API

\n\n# Plot: Text\n\n**text** 标记在给定的 *xy* 位置绘制文本。常用于标记其他标记，例如显示柱状的值；当空间可用时，这可以比单独的轴（或工具提示）更快、更准确地读取值。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"alphabet = FileAttachment(\"alphabet.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":48,"value":"Plot.plot({\n x: {\n label: null\n },\n y: {\n grid: true,\n label: \"↑ Frequency (%)\",\n transform: d => d * 100\n },\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\"}),\n Plot.text(alphabet, {x: \"letter\", y: \"frequency\", text: d => (d.frequency * 100).toFixed(1), dy: -5}),\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":37,"value":"md`\n如果数据点太多，标签可能会因遮挡而难以阅读。 [*filter* transform](/@observablehq/plot-transforms) 可用于仅标记某些数据。在下面的连接散点图中（从2009年开始，重新创建 Hannah Fairfield 的 [“Driving Shifts Into Reverse”](http://www.nytimes.com/imagepages/2010/05/02/business/02metrics.html) ），每五年一标记。未来，我们预计 Plot 将有一个自动标记变换，可能类似于 Philippe Rivière 的 [Occlusion](/@fil/occlusion)。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"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":94,"value":"Plot.plot({\n grid: true,\n x: {\n label: \"Miles driven (per capita per year) →\"\n },\n y: {\n label: \"↑ Price of gas (average per gallon, adjusted)\"\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: -8})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`\n对于具有多个系列的折线图，通常希望仅标记线条的开头或结尾。这可以通过切片数据来完成，如下所示（注意这个数据是按时间倒序排列的，所以数据中的第一个元素是最新的），或者通过使用 [select transform](/@observablehq/plot-select)。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"travelers = FileAttachment(\"travelers.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":99,"value":"Plot.plot({\n y: {\n grid: true,\n nice: true,\n label: \"↑ Travelers per day (millions)\",\n transform: d => d / 1e6\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(travelers, {\n x: \"date\",\n y: \"previous\",\n stroke: \"#bab0ab\"\n }),\n Plot.line(travelers, {\n x: \"date\",\n y: \"current\"\n }),\n Plot.text(travelers.slice(0, 1), {\n x: \"date\",\n y: \"previous\",\n text: [\"2019\"],\n fill: \"#8a817c\",\n dy: \"-0.5em\"\n }),\n Plot.text(travelers.slice(0, 1), {\n x: \"date\",\n y: \"current\",\n text: [\"2020\"],\n dy: \"1.2em\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"travelers.slice(0, 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"md`\ntext mark也可用于直接可视化数据，类似于散点图中的[dot mark](/@observablehq/plot-dot)。在 Caltrain 的 Palo Alto 车站时刻表的“茎叶”图下方使用了 [stacked](/@observablehq/plot-stack) 文本。 *fill* 通道提供颜色编码以区分每次停靠的本地列车（黑色*N*）、停靠次数较少的有限列车（橙色*L*）以及停靠次数最少的“baby bullet”列车（*B* 红色）。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"caltrain = FileAttachment(\"caltrain.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"Plot.plot({\n width: 240,\n axis: null,\n color: {\n domain: \"NLB\",\n range: [\"currentColor\", \"peru\", \"brown\"]\n },\n marks: [\n Plot.text([[1, 3]], {\n text: [\"Northbound\"], \n textAnchor: \"start\"\n }),\n Plot.text([[-1, 3]], {\n text: [\"Southbound\"], \n textAnchor: \"end\"\n }),\n Plot.text(new Set(caltrain.map(d => d.hours)), {\n x: 0,\n y: d => d,\n text: d => `${(d - 1) % 12 + 1}${(d % 24) >= 12 ? \"p\": \"a\"}`\n }),\n Plot.text(caltrain, Plot.stackX2({\n filter: d => d.orientation === \"N\",\n x: 1,\n y: \"hours\",\n text: d => d.minutes.padStart(2, \"0\"),\n title: d => `${d.time} ${d.line}`,\n fill: \"type\",\n textAnchor: \"start\"\n })),\n Plot.text(caltrain, Plot.stackX2({\n filter: d => d.orientation === \"S\",\n x: -1,\n y: \"hours\",\n text: d => d.minutes.padStart(2, \"0\"),\n title: d => `${d.time} ${d.line}`,\n fill: \"type\",\n textAnchor: \"end\"\n })),\n Plot.ruleX([-0.5, 0.5])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`\n*title* 通道指定当用户将鼠标悬停在文本上时要显示的工具提示。在这显示每列火车的时间和数量。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"md`\ntext mark为 *x*、*y*、*z*（用于 *z*-order）、*text*、*title* 和 *fill* 提供通道。所有其他选项都是常量。因此，如果希望某些标签左对齐而其他标签右对齐，请使用具有不同 *textAnchor* 选项的单独text mark。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`\n*x* 和 *y* 通道是可选的；仅指定*x* 或*y* 之一即可生成一维text mark。如果 *x* 和 *y* 通道均未定义，则text mark假定数据是点 [[*x₁*, *y₁*], [*x₂*, *y₂*], ...] 的可迭代对象，允许速记。此外，默认的 *text* 通道是相关数据的索引。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"points = Array.from({length: 10}, (_, i) => [1.2 - Math.sin(1 + i / 5), Math.cos(i / 6)])","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 grid: true,\n x: {\n domain: [0, 1]\n },\n y: {\n domain: [0, 1]\n },\n marks: [\n Plot.line(points),\n Plot.dot(points, {fill: \"white\", r: 6}),\n Plot.text(points)\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`text mark将以下 SVG 文本属性作为选项公开: [*textAnchor*](https://www.w3.org/TR/SVG11/text.html#TextAnchorProperty), [*fontFamily*](https://www.w3.org/TR/SVG11/text.html#FontFamilyProperty), [*fontSize*](https://www.w3.org/TR/SVG11/text.html#FontSizeProperty), [*fontStyle*](https://www.w3.org/TR/SVG11/text.html#FontStyleProperty), [*fontVariant*](https://www.w3.org/TR/SVG11/text.html#FontVariantProperty), [*fontWeight*](https://www.w3.org/TR/SVG11/text.html#FontWeightProperty), [*dx*](https://www.w3.org/TR/SVG11/text.html#TSpanElementDXAttribute), [*dy*](https://www.w3.org/TR/SVG11/text.html#TSpanElementDYAttribute). 文本标记目前不支持多行文本、换行或旋转文本。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"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