44:["$","title",null,{"children":"Marks / Observable Plot | 1907040202 | Observable"}] 4c:[] 48:{"id":"d5c978a9076343c9","slug":"marks-observable-plot","title":"Marks / Observable Plot","thumbnail":"cb47d03081020cc4d7773038b3499f2d8ac22b9d597672f2c1b7bdafc2283ee8","access_level":"public","create_time":"$D2021-11-13T01:49:45.412Z","update_time":"$D2021-11-15T09:28:41.828Z","view_time":null,"first_public_time":"$D2021-11-13T16:25:20.288Z","has_unpublished_edits":null,"fork":{"id":"e6a8fdd26dcec9fe","slug":"plot-marks","title":"Marks and Channels / 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":1059,"publish_version":1059,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Marks / Observable Plot","cells":[{"id":141,"value":"md`

Marks / Observable Plot

Observable Plot › Marks · API

\n\n# Plot: Marks\n\nPlot没有图表类型。相反，它具有标记：条形、点和线等几何形状。然而，与传统图形系统不同的是，Plot标记不是按像素定位或按字面着色绘图的，而是在用抽象数据绘图。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"md`接下来我们使用点标记[dot mark](/@observablehq/plot-dot)进行绘图来了解具体如何操作。绘图标记是用于从数据生成形状但不是单个形状的模板。考虑这个玩具表格数据集，将水果销售记录为一个 {*units*, *fruit*} 对象数组。我们将在这里对数据进行硬编码，但更常见的是会加载一个 CSV 文件[file](/@observablehq/file-attachments)。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"sales = [\n {units: 10, fruit: \"fig\"},\n {units: 20, fruit: \"date\"},\n {units: 40, fruit: \"plum\"},\n {units: 30, fruit: \"plum\"}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"md`为了绘制图表，我们要设置标记的视觉属性对应的数据列。由于这些视觉属性编码抽象数据，我们称它们为**通道**。例如，我们可以将units列编码为 x 位置，将fruit列编码为 y 位置。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"Plot.dot(sales, {x: \"units\", y: \"fruit\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md`x 值 {10, 20, ...} 是代表销售单位的数字，而不是像素。在函数实现过程中，Plot 构造了一个隐式线性比例尺，将最小值 x = 10 映射到图的左边缘，将最大值 x = 40 映射到右边缘。 y 值是表示分类数据的字符串。因此，Plot 构造了一个隐式的序数（点）比例尺，以便为三个不同的 y 值均匀划分可用的垂直空间。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"md`命名列对于表示为对象数组的表格数据很方便，但为了更强的灵活性，我们可以使用函数将抽象值提供给通道。为数据中的每个元素重复调用通道函数，传递数据（通常为 d）和从零开始的索引 (i)。这些函数也可以进行数据处理；例如，units乘以1000。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"Plot.dot(sales, {x: d => d.units * 1000, y: d => d.fruit}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"md`命名列的优点是它们允许 Plot 自动标记轴，使绘图的含义更加明显。但是在上图中，这些标签丢失了，如果需要，我们可以使用 scale.label 选项将它们添加回来。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"Plot.dot(sales, {x: d => d.units, y: d => d.fruit}).plot({x: {label: \"units →\"}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"md`指定通道值的一种等效（且更有效）的方法是使用并行数组。这种方法只要每个通道都有一个与数据长度相同的数组，数据中的内容并不重要。这种方法非常适合列式数据结构，例如 [Arquero](/@uwdata/introducing-arquero?collection=@uwdata/arquero)。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"index = [0, 1, 2, 3] // any array of suitable length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"units = [10, 20, 40, 30] // x₁, x₂, …","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"fruits = [\"fig\", \"date\", \"plum\", \"plum\"] // y₁, y₂, …","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"Plot.dot(index, {x: units, y: fruits}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md`为了更简洁的速记，许多标记提供了默认通道定义。如果我们将 [[x₁, y₁], [x₂, y₂], [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":778,"value":"xy = [\n [10, \"fig\"], // x₁, y₁\n [20, \"date\"], // x₂, y₂\n [40, \"plum\"], // etc.\n [30, \"plum\"]\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"Plot.dot(xy).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"md`Plot可以有多个标记。标记分层，最后一个标记绘制在顶部。每个标记都有自己的数据、通道和选项。但是，标记共享scale。因此，可以使用多个标记来组合数据集：从关联数据的并集推断出scale的域。例如，使用单独的标记绘制每个点也是可以的，但是这样效率较低而且比较冗长。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"Plot.plot({\n marks: [\n Plot.dot([[10, \"fig\"]]), // x₁, y₁\n Plot.dot([[20, \"date\"]]), // x₂, y₂\n Plot.dot([[40, \"plum\"]]), // etc.\n Plot.dot([[30, \"plum\"]])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"md`标记还可以用作具有特殊含义的值的注释，例如下面 x = 0 处的规则[rule](/@observablehq/plot-rule)。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"Plot.plot({\n marks: [\n Plot.dot(sales, {x: \"units\", y: \"fruit\"}),\n Plot.ruleX([0]) // a rule at x = 0\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"md`Plot 目前支持大约十几种标记类型：[Area](/@observablehq/plot-area), [Bar](/@observablehq/plot-bar), [Cell](/@observablehq/plot-cell), [Dot](/@observablehq/plot-dot), [Frame](/@observablehq/plot-frame), [Line](/@observablehq/plot-line), [Link](/@observablehq/plot-link), [Rect](/@observablehq/plot-rect), [Rule](/@observablehq/plot-rule), [Text](/@observablehq/plot-text), 和 [Tick](/@observablehq/plot-tick)。标记类型不仅决定形状——它们还决定支持哪些通道和选项，以及与每个通道关联的比例（如果有的话）。 bar 和 dot 都支持 x 和 y 位置。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"Plot.barX(sales, {x: \"units\", y: \"fruit\"}).plot() // bars extends from x = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"md`条形标记[bar mark](/@observablehq/plot-bar)与矩形标记[rect mark](/@observablehq/plot-rect)密切相关。两者都生成一个矩形；不同之处在于如何指定矩形的坐标。对于条形标记，一侧是定量区间（例如，从 0 到销售单位数），而另一侧是序数（或分类）值（例如，水果名称）；而对于矩形标记，两边都是定量区间。因此，条形标记用于条形图，但直方图需要矩形标记。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"md`barX 的 x 通道是 x 上的隐式堆栈变换[stack transform](/@observablehq/plot-stack)的简写，产生 x1 和 x2 通道。如果需要，你可以明确定义这些通道。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"Plot.barX(sales, {x1: 0, x2: \"units\", y: \"fruit\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"md`请注意，由于plum有两个数据点，并且我们明确地将 x1 设置为零而不是叠加，所以上面隐藏了两个重叠的条。我们可以通过设置 fillOpacity 选项来显示它们。标记通道随数据而变化，标记选项由标记的所有实例共享。通道和选项都在同一个对象中指定（标记构造函数的第二个参数，在数据之后）。请参阅标记类型相关资料以了解可用的通道和选项。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"Plot.barX(sales, {x1: 0, x2: \"units\", y: \"fruit\", fillOpacity: 0.5}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"md`如果我们的目标是显示售出的总单位数，我们可以[分组](/@observablehq/plot-group)以对每个水果的价值求和而不是叠加。这将标记的数据与其 x 和 y 通道聚合在一起，为每个水果生成一个条形图。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"Plot.barX(sales, Plot.groupY({x: \"sum\"}, {x: \"units\", y: \"fruit\"})).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"md`Bars 支持fill选项，如果我们想要蓝色条形而不是从周围页面继承文本颜色。我们还可以添加一个规则[rule](/@observablehq/plot-rule)来表示 x = 0。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"Plot.plot({\n marks: [\n Plot.barX(sales, {x: \"units\", y: \"fruit\", fill: \"steelblue\"}),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`也可以将fill选项指定为将抽象数据编码为颜色的通道。我们可以使用分类颜色编码为每个条形赋予不同的颜色。 `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"Plot.plot({\n marks: [\n Plot.barX(sales, {x: \"units\", y: \"fruit\", fill: \"fruit\"}),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"md`如果两者都是字符串，Plot 怎么知道“fruit”是字段名称，而“steelblue”是颜色呢？ Plot 会检查填充是否为有效的 CSS 颜色；如果是，则将其解释为选项，否则，将其解释为通道的字段名称。如果要将fill显式声明为通道，就要传递函数或数组。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"Plot.plot({\n marks: [\n Plot.barX(sales, {x: \"units\", y: \"fruit\", fill: d => d.fruit}),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"md`如果将fill通道定义为一个函数，该函数将返回一个抽象值——而不是文字颜色。下面的代码可能会给你带来疑惑，因为“黑色”条是蓝色的，而“红色”条是橙色的。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"Plot.plot({\n marks: [\n Plot.barX(sales, {x: \"units\", y: \"fruit\", fill: d => d.units > 20 ? \"black\" : \"red\"}),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"md`其实它不是返回文字颜色，而是返回一个抽象值，然后根据需要，设置比例的域和范围。（将来也将允许 Plot 生成可读的颜色图例。）`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"Plot.plot({\n color: {\n domain: [\"small\", \"big\"],\n range: [\"red\", \"black\"]\n },\n marks: [\n Plot.barX(sales, {x: \"units\", y: \"fruit\", fill: d => d.units > 20 ? \"big\" : \"small\"}),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"md`接下来，让我们深入了解一下scale。\n\nNext \nAPI Reference`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null