25:["$","title",null,{"children":"Learn D3: Scales | 1907040205 | Observable"}] 4b:T8be,{ const margin = ({top: 30, right: 30, bottom: 30, left: 30}); const barId = DOM.uid("bar"); const arrowId = DOM.uid("arrow"); return htl.svg``; }4c:[{"id":"ef5fbb8b77ff7c117ec45df5583ee5919321685578e8247c348eaa9139e6dacf64ef339374c8069109351d0985aee2e536884e5cb82d4361c21123adb8790475","href":"https://static.observableusercontent.com/files/ef5fbb8b77ff7c117ec45df5583ee5919321685578e8247c348eaa9139e6dacf64ef339374c8069109351d0985aee2e536884e5cb82d4361c21123adb8790475","name":"bertin-variables.png","type":"image/png","lastModified":1636789344888.495,"size":329437}] 47:{"id":"e6cbcbf2f52f0b5c","slug":"learn-d3-scales","title":"Learn D3: Scales","thumbnail":"2b51d1b3a7aa67580c068c5222bc4e67096c7703b5ee9b1607ca1b24e46a106c","access_level":"public","create_time":"$D2021-11-13T07:42:24.888Z","update_time":"$D2021-11-13T11:53:54.832Z","view_time":null,"first_public_time":"$D2021-11-15T10:18:09.360Z","has_unpublished_edits":null,"fork":{"id":"68c99514280dff28","slug":"learn-d3-scales","title":"Learn D3: Scales","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"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":4497,"publish_version":4497,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Learn D3: Scales","cells":[{"id":75,"value":"# Learn D3: Scales\n\n *scale*是D3 的所有数据图形工具最基本的工具，它将数据的抽象维度映射到视觉变量。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"value":"fruits = [\n {name: \"🍊\", count: 21},\n {name: \"🍇\", count: 13},\n {name: \"🍏\", count: 8},\n {name: \"🍌\", count: 5},\n {name: \"🍐\", count: 3},\n {name: \"🍋\", count: 2},\n {name: \"🍎\", count: 1},\n {name: \"🍉\", count: 1}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3042,"value":"通常将维度视为空间，例如三个维度中的位置。但抽象维度不一定是空间的。它可能是定量的，例如上面每个水果的*count*。或者可能是名义上的，例如 *name*。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3825,"value":"fruits.map(d => d.count) // the count dimension (quantitative)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3828,"value":"fruits.map(d => d.name) // the name dimension (nominal)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3061,"value":"在*图形符号学*中，Jacques Bertin 描述了诸如点和线之类的图形标记如何“表示差异 (≠)、相似性 (≡)、量化顺序 (Q) 或非量化顺序 (O)，并且可以表达组、层次结构或垂直移动”使用位置、大小、颜色等。图形标记的这些属性是视觉变量。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3075,"value":"md`

From *Semiology of Graphics*, colorized by the author.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3394,"value":"与许多可视化一样，下面的条形图将两个抽象维度映射到两个可视变量：*name* 维度映射到条形的 *y*-位置，而 *count* 维度映射到 *x*-位置。这些映射由后面的 *x* 和 *y* 比例实现。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3396,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2241,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(fruits, d => d.count)])\n .range([margin.left, width - margin.right])\n .interpolate(d3.interpolateRound)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2237,"value":"y = d3.scaleBand()\n .domain(fruits.map(d => d.name))\n .range([margin.top, height - margin.bottom])\n .padding(0.1)\n .round(true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3081,"value":"D3 scales有多种类型。使用哪种类型取决于抽象维度（定量或名义？）和视觉变量（位置或颜色？）。这里*x* 是[linear scale](/@d3/d3-scalelinear) 因为*count* 是定量的，条形长度应该与值成比例，而*y* 是[band scale](/@d3/d3-scaleband) 因为 *name* 是名义上的，条形很粗。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3474,"value":"每个scales由从抽象数据（*domain*）到视觉变量（*range*）成对对应配置。例如，*x*-domain的下限值 (0) 映射到 *x*-range的下限值（图表的左边缘），而domain的上限值（最大计数）映射到 range的上限值（图表的右边缘）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3539,"value":"\n对于linear scale，domain和range是连续区间（从 *min* 到 *max*）。对于band scale，domain是一个离散值数组（🍊，🍇，🍏，...），而range是一个连续的区间；band scale自动确定如何将range分割成离散的、填充的bands。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4036,"value":"上面的scales是使用*方法链*配置的。这种简洁的样式是可以实现的。例如 *scale*.domain，会返回scales。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4039,"value":"{\n const x = d3.scaleLinear();\n x.domain([0, d3.max(fruits, d => d.count)]);\n x.range([margin.left, width - margin.right]);\n x.interpolate(d3.interpolateRound);\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4050,"value":"\n如果不带参数调用它们，Scale 方法也可用于检索它们的关联值。这对于导出新的scales或debugging很有用。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4046,"value":"x.domain()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4047,"value":"x.range()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2893,"value":"\nD3 scale 是一个函数：调用它会返回对应于给定抽象值（例如 *count*）的视觉值（例如 *x*-position）。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2717,"value":"y(\"🍇\") // the y-coordinate for name = grapes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2720,"value":"x(21) // the x-coordinate corresponding to count = 21","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4313,"value":"x(0) // the x-coordinate corresponding to count = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4191,"value":"\n根据 [习俗](/@d3/margin-convention)，大多数 D3 charts将边距应用于插入scale ranges并为轴腾出空间。因此，*x*(0) 通常不为零，是左边距的大小。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4076,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3435,"value":"\n这些scales返回的 *xy*-position 是一个点，例如 [*x* = 640, *y* = 30]。但由于条形不是无穷小，它们有宽度和高度，这个位置对应于条形的右上角。条形的宽度为 *x*(*count*) - *x*(0)，其高度由band scale定义为 *y*.bandwidth()。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3541,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3595,"value":"x(21) - x(0) // the width of the bar corresponding to count = 21","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3597,"value":"y.bandwidth() // the height of each bar","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3620,"value":"下面是一个单独的酒吧的代码。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3603,"value":"viewof count = Inputs.range([0, 21], {value: 12, step: 1, label: \"Count\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3607,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2139,"value":"md`上面的代码使用了 [超文本文字 (htl)](/@observablehq/htl)，这是一种在 Observable 中呈现 HTML 或 SVG 标记的便捷方式。动态表达式，如width，可以作为 \\${...} 嵌入到文字中。`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2442,"value":"md`然而，超文本文字的真正魔力在于：嵌入的表达式可以是 DOM 元素，甚至是 DOM 元素的数组！因此，我们可以通过将数据映射到 SVG 元素来同时生成所有条形图。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2695,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3746,"value":"\n（这些嵌套表达式使用 htl.svg——一种专用于 SVG 而不是 HTML 的超文本文字——因为 SVG 元素有自己的 XML 命名空间。对于外部 SVG 元素，可以使用 htl.svg 或 htl.html，但在内部，SVG 文字是必要的。因为SVG元素有自己的命名空间。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2945,"value":"使用scales的另一个重要原因是 D3 提供了用于明确显示位置scale编码的轴，并带有漂亮的、人类可读的刻度。轴提高了图表的可读性，帮助你进行交流。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2270,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4347,"value":"\nD3 轴需要 [selections](https://github.com/d3/d3-selection)，已经避免使用声明性超文本文字。但如上，两者可以和谐搭配。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3899,"value":"\n要添加轴，首先使用 htl.svg 创建一个（尚未分离的）G 元素。然后通过将它传递给 [d3.select](https://github.com/d3/d3-selection/blob/main/README.md#select) 来选择这个元素。然后调用 [*selection*.call](https://github.com/d3/d3-selection/blob/main/README.md#selection_call) 一次将轴渲染到 G 元素中，再次删除domain路径。最后，我们通过调用 [*selection*.node](https://github.com/d3/d3-selection/blob/main/README.md#selection_node) 来检索 G 元素，并将其嵌入到外部文字中。 ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2950,"value":"\n位置是最强的视觉变量，因此到目前为止对scale的讨论都集中在位置上并非巧合。\n\n然而，scale可用于其他视觉变量，例如颜色。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3763,"value":"color = d3.scaleSequential()\n .domain([0, d3.max(fruits, d => d.count)])\n .interpolator(d3.interpolateBlues)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3940,"value":"\n上面的代码定义了一个顺序刻度，它类似于线性刻度，除了它依赖于linear scale而不是range。 linear scale是一个函数，它取一个介于 0 和 1 之间的值，返回相应的视觉值。通常，linear scale是 D3 的 [内置配色方案](/@d3/color-schemes) 之一。\n\n将颜色值传递给 color scale会返回相应的颜色字符串。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3918,"value":"color(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3921,"value":"color(21)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3953,"value":"\n可以向条形图添加冗余编码，将 *count* 映射到 *color* 以及 *x*-position。为了记录颜色编码，可以导入一个 [D3 color legend](/@d3/color-legend)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3767,"value":"Legend(color, {title: \"Number of fruit\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3765,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1419,"value":"\n一些可视化需要专门的图形标记，这些标记不是 SVG 或 Canvas 内置的。接下来，将超越基本的柱状图，访问D3的形状。\nNext","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"---\n\n## 附录","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2264,"value":"width = 640","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2238,"value":"height = 202","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2307,"value":"margin = ({top: 20, right: 0, bottom: 0, left: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3769,"value":"import {Legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null