45:["$","title",null,{"children":"Link Mark / Observable Plot | 1907040202 | Observable"}] 4d:[{"id":"6be2a2aee667af7c38ecc54c7570c6ce1eab3f1ed0f3f5c9a0a70d05ada75dba54858f084a608600354c2da7e2b3d877ef92aebe7b0dcc8d4a95df421796792b","href":"https://static.observableusercontent.com/files/6be2a2aee667af7c38ecc54c7570c6ce1eab3f1ed0f3f5c9a0a70d05ada75dba54858f084a608600354c2da7e2b3d877ef92aebe7b0dcc8d4a95df421796792b","name":"income.csv","type":"text/csv","lastModified":1637552375985.617,"size":2571},{"id":"39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","href":"https://static.observableusercontent.com/files/39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","name":"metros.csv","type":"text/csv","lastModified":1637552375985.617,"size":15389}] 49:{"id":"42d17a905da39e4c","slug":"link-mark-observable-plot","title":"Link Mark / Observable Plot","thumbnail":"8016d126ff1a872dd1bb86eb464f3d60577302cbff6d8e26eb75234137429c00","access_level":"public","create_time":"$D2021-11-22T03:39:35.985Z","update_time":"$D2021-11-22T10:09:09.056Z","view_time":null,"first_public_time":"$D2021-11-22T10:09:25.574Z","has_unpublished_edits":null,"fork":{"id":"c04b4c0471d3fdf5","slug":"plot-link","title":"Link 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":255,"publish_version":255,"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":"Link Mark / Observable Plot","cells":[{"id":26,"value":"md`

Link Mark / Observable Plot

Observable Plot › Marks › Link · API

\n\n# Plot: Link\n\n链接标记在 x 和 y 中的两个点之间绘制一条直线。例如，下面我们展示了从 1980 年到 2015 年美国各个城市的不平等程度（和人口）不断上升的情况。每个链接代表对一个城市的两个观察：1980 年该城市的人口 (x) 和不平等程度 (y)，2015 年相同 . 链接的颜色冗余地编码了不平等程度的变化：红色表示不平等程度加剧，而蓝色（只有四个）表示不平等程度下降。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"metros = FileAttachment(\"metros.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":25,"value":"Plot.plot({\n grid: true,\n inset: 10,\n x: {\n type: \"log\",\n label: \"Population →\",\n tickFormat: \"~s\"\n },\n y: {\n label: \"↑ Inequality\"\n },\n color: {\n type: \"diverging\",\n reverse: true\n },\n marks: [\n Plot.link(metros, {\n x1: \"POP_1980\",\n y1: \"R90_10_1980\",\n x2: \"POP_2015\",\n y2: \"R90_10_2015\",\n stroke: d => d.R90_10_2015 - d.R90_10_1980\n }),\n Plot.dot(metros, {\n x: \"POP_2015\",\n y: \"R90_10_2015\",\n r: 1\n }),\n Plot.text(metros, {\n x: \"POP_2015\",\n y: \"R90_10_2015\",\n filter: \"highlight\",\n text: \"nyt_display\",\n dy: -6\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`\n像规则[rule](/@observablehq/plot-rule)一样，链接也可以用作支持解释的注释。然而，规则是严格水平或垂直的，但链接可以生成对角线[diagonal lines](http://kelsocartography.com/blog/?p=2074)。下图描绘了美国按教育程度和年龄划分的工资方面的性别差距。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"income = FileAttachment(\"income.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":114,"value":"incdomain = d3.extent(income.flatMap(d => [d.m, d.f]))","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 height: 600,\n marginRight: 40,\n x: {\n label: \"Median annual income (men, thousands) →\",\n tickFormat: d => d / 1000\n },\n y: {\n label: \"↑ Median annual income (women, thousands)\",\n tickFormat: d => d / 1000\n },\n marks: [\n Plot.link([1], {\n x1: () => incdomain[0],\n y1: () => incdomain[0], \n x2: () => incdomain[1], \n y2: () => incdomain[1]\n }),\n Plot.link([0.6, 0.7, 0.8, 0.9], {\n x1: () => incdomain[0],\n y1: k => incdomain[0] * k,\n x2: () => incdomain[1],\n y2: k => incdomain[1] * k,\n strokeOpacity: 0.2\n }),\n Plot.text([0.6, 0.7, 0.8, 0.9, 1.0], {\n x: () => incdomain[1],\n y: k => incdomain[1] * k,\n text: d => d === 1 ? \"Equal\" : d3.format(\"+.0%\")(d - 1),\n textAnchor: \"start\",\n dx: 6 \n }),\n Plot.dot(income, {x: \"m\", y: \"f\", title: d => `${d.type}, ${d.age}`})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`相比之下，即使域明确设置为相等，规则的网格也会使性别差异不那么明显。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"Plot.plot({\n height: 600,\n marginRight: 40,\n grid: true,\n x: {\n label: \"Median annual income (men, thousands) →\",\n tickFormat: d => d / 1000,\n domain: incdomain\n },\n y: {\n label: \"↑ Median annual income (women, thousands)\",\n tickFormat: d => d / 1000,\n domain: incdomain\n },\n marks: [\n Plot.dot(income, {x: \"m\", y: \"f\", title: d => `${d.type}, ${d.age}`})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"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