3e:null 3f:["$","title",null,{"children":"Learn D3: Scales | weifeng.zhang | Observable"}] 45:T8be,{ const margin = ({top: 30, right: 30, bottom: 30, left: 30}); const barId = DOM.uid("bar"); const arrowId = DOM.uid("arrow"); return htl.svg``; }46:[{"id":"ef5fbb8b77ff7c117ec45df5583ee5919321685578e8247c348eaa9139e6dacf64ef339374c8069109351d0985aee2e536884e5cb82d4361c21123adb8790475","href":"https://static.observableusercontent.com/files/ef5fbb8b77ff7c117ec45df5583ee5919321685578e8247c348eaa9139e6dacf64ef339374c8069109351d0985aee2e536884e5cb82d4361c21123adb8790475","name":"bertin-variables.png","type":"image/png","lastModified":1666333081896.135,"size":329437}] 43:{"id":"13ec90c9c1a65e03","slug":null,"title":"Learn D3: Scales","thumbnail":"6cfaec4da75f9a3996973e7ae4aa06006b90db3b72d847a56ca58fed01c171a2","access_level":"public","create_time":"$D2022-10-21T06:18:01.896Z","update_time":"$D2022-10-24T05:23:40.203Z","view_time":null,"first_public_time":"$D2022-10-21T06:18:01.896Z","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":"6b3568667956ea80","login":"wulakaka","name":"weifeng.zhang","avatar_url":"https://avatars-next.observableusercontent.com/6d2a0eb5a21e76cf20c6c7664341f21aa82a675d80335a7d04c51ee172929a6b","tier":"starter_2024","bio":"","following":false},"version":4574,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6635d799ab4ae335","login":"wulakaka","name":"weifeng.zhang","avatar_url":"https://avatars-next.observableusercontent.com/6d2a0eb5a21e76cf20c6c7664341f21aa82a675d80335a7d04c51ee172929a6b","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"6635d799ab4ae335","login":"wulakaka","name":"weifeng.zhang","avatar_url":"https://avatars-next.observableusercontent.com/6d2a0eb5a21e76cf20c6c7664341f21aa82a675d80335a7d04c51ee172929a6b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Learn D3: Scales","cells":[{"id":75,"value":"# Learn D3: Scales\n\nOf all D3’s tools for data graphics, the most fundamental is the *scale*, which maps an abstract dimension of data to a visual variable.\n\nFor a taste, consider this tiny (but delicious!) dataset of fruit.","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":"We typically think of dimensions as spatial, such as position in three dimensions, but an abstract dimension need not be spatial. It may be quantitative, such as the *count* of each fruit above. Or it may be nominal, such as a *name*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4467,"value":"我们通常认为维度是空间的，比如在三维空间中的位置，但是抽象维度不一定是空间的。它可以是定量的，比如上面的每种水果的*count*。或者它可能是名义上的，例如名称。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":"In *Semiology of Graphics*, Jacques Bertin describes how graphical marks such as points and lines can “represent differences (≠), similarities (≡), a quantified order (Q), or a nonquantified order (O), and can express groups, hierarchies, or vertical movements” using position, size, color, and the like. These properties of graphical marks are our visual variables.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4469,"value":"在*图形符号学*中，Jacques Bertin 描述了点和线等图形标记如何“表示差异（≠），相似性（≡），量化顺序（Q），非量化顺序（O），并且可以使用位置、大小、颜色等来表达组、层次结构或垂直运动”。图形标记的这些属性使我们的视觉变量化。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":"Like many visualizations, the bar chart below maps two abstract dimensions to two visual variables: the *name* dimension is mapped to the bars’ *y*-position, while the *count* dimension is mapped to the *x*-position. These mappings are implemented by the *x* and *y* scales that follow.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4483,"value":"与很多可视化相同，下面的条形图映射了两个抽象维度到两个可视化变量：*name*维度被映射到条形图的*y*位置，*count*维度被映射到*x*位置。这些映射由下面的*x*和*y*scales实现。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":"(Feel free to edit the code and see what happens!)\n\nD3 scales come in many types. Which you use depends on the abstract dimension (quantitative or nominal?) and the visual variable (position or color?). Here *x* is a [linear scale](/@d3/d3-scalelinear) because *count* is quantitative and bar length should be proportional to value, while *y* is a [band scale](/@d3/d3-scaleband) because *name* is nominal and bars are thick.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4486,"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":"","database":"$undefined"},{"id":3474,"value":"Each scale is configured by pairwise correspondences from abstract data (the *domain*) to visual variable (the *range*). For example, the *x*-domain’s lower value (0) is mapped to *x*-range’s lower value (the chart’s left edge), while the domain’s upper value (the maximum count) is mapped to the range’s upper value (the right edge).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4491,"value":"每个标尺都通过从抽象数据（*domain*）到可视变量（*range*）的成对对应来配置。比如*x*-domain的下限值（0）映射到*x*-范围的下限值（图的左边界），domain的上限值（最大计数）映射到范围的上限值（右边界）。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3539,"value":"For a linear scale, the domain and range are continuous intervals (from *min* to *max*). For a band scale, the domain is an array of discrete values (🍊, 🍇, 🍏, …) while the range is a continuous interval; the band scale automatically determines how to slice the range into discrete, padded bands.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4493,"value":"对于线性标尺来说，域和范围是连续的间隔（从*min*到*max*）。对于band标尺，域是离散值的数组（🍊, 🍇, 🍏, …），而范围是连续的间隔；band 标尺自动决定如何将范围划分为离散的填充波段。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4036,"value":"The scales above are configured using *method chaining*. This concise style is possible because methods that configure a scale, such as *scale*.domain, return the scale. Here’s the equivalent longhand.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4495,"value":"上面的标尺是使用*method chaining*配置的。这种简洁的风格是可行的，因为配置一个标尺的方法返回了标尺，例如*scale*.domain。这里是等效的通俗写法。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":"Scale methods can also be used to retrieve their associated values if you call them with no arguments. This is useful for deriving new scales or debugging.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4498,"value":"标尺方法也可以用来获取他们相关的值，如果你调用他们时没有传递任何参数。这对于获取新的标尺或debug非常有用。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":"And what *is* a D3 scale? A function. Calling it returns the visual value (such as an *x*-position) corresponding to the given abstract value (such as a *count*).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4500,"value":"什么是D3标尺？一个函数。调用它会返回给出的抽象值（比如*count*）对应的可视值（比如*x*-位置）。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":"By [convention](/@d3/margin-convention), most D3 charts apply margins to inset scale ranges and make room for axes. Hence, *x*(0) is often not zero; it’s the size of the left margin.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4502,"value":"按照[惯例](/@d3/margin-convention)，大多数D3图表将边距应用于插图，缩放并为轴腾出空间。因此，*x*(0)通常不是零；它是左边距的值。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4076,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3435,"value":"The *xy*-position returned by these scales is a point, such as [*x* = 640, *y* = 30]. But since bars aren’t infinitesimal—they have a width and height—this position corresponds to the bar’s top-right corner. The bar’s width is *x*(*count*) - *x*(0), and its height is defined as *y*.bandwidth() by the band scale.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4509,"value":"*xy*-位置通过这些标尺范围的是一个点，比如[*x* = 640, *y* = 30]。但是由于条形不是无穷小的，他们有宽和高，因此这个位置对应了条形图的右上角。条形的宽是*x(count)* - *x(0)*，它的高由 band标尺的 *y*.bandWidth()定义。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":"Let’s peel away another layer of the onion (or the… banana?) to see how scales are used. Below is the code for a solitary bar.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4514,"value":"让我们剥掉另一层洋葱（或香蕉？）来看看如何使用标尺。下面是一个单一条形的代码。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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`The code above uses [hypertext literal (htl)](/@observablehq/htl), which is a convenient way to render HTML or SVG markup in Observable. Dynamic expressions, such as the width of the bar, can be embedded in literals as \\${…}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4522,"value":"上面的代码使用了[超文本文本(htl)](/@observablehq/htl)，这是在Observable中渲染HTML或SVG标记的便捷方法。动态表达式，比如条形的宽，可以通过\\${...}嵌入到文本中。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2442,"value":"md`The real magic of hypertext literals, though, is that embedded expressions can be DOM elements or even arrays of DOM elements! We can thus generate all the bars simultaneously by mapping the data to SVG elements.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4526,"value":"然而，超文本文本的真正魔力在于，嵌入表达式可以是DOM元素甚至是DOM元素的数组！因此我们可以将数据映射到SVG元素来同时生成所有的条形。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":"(These nested expressions use htl.svg—a hypertext literal specifically for SVG rather than HTML—because SVG elements have their own XML namespace. You can use either htl.svg or htl.html for the outer SVG element, but within, the SVG literal is necessary. Because namespaces.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4528,"value":"（这些嵌套的表达式使用了 htl.svg（一种专门用于SVG而不是HTML的超文本文本），因为SVG元素有他们自己的XML命名空间。你可以为外部的SVG元素使用htl.svg或htl.html，但是内部，SVG文本是必须的，因为命名空间。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2945,"value":"Another great reason to use scales is that D3 provides axes for explicitly showing a positional scale’s encoding, complete with nice, human-readable ticks. Axes improve the readability of charts, helping you to communicate.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4530,"value":"使用标尺的另一个重要原因是D3提供了用于明确显示位置刻度编码的轴，并配有漂亮的、人类可读的刻度线。轴线提高了图标的可读性，帮助你交流。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":"D3 axes require [selections](https://github.com/d3/d3-selection), which we’ve so far avoided in favor of declarative hypertext literals. But as above, the two can be paired harmoniously.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4533,"value":"D3轴需要[selections](https://github.com/d3/d3-selection)，到目前为止，我们一直在避免选择，转而使用声明性超文本文。但如上所述，两者可以和谐地配对。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3899,"value":"To add the axis, we first create a (as yet detached) G element using htl.svg. Then we select this element by passing it to [d3.select](https://github.com/d3/d3-selection/blob/main/README.md#select). Then we invoke [*selection*.call](https://github.com/d3/d3-selection/blob/main/README.md#selection_call) once to render the axis into the G element, and again to remove the domain path (for a minimalist style). Lastly we retrieve the G element by calling [*selection*.node](https://github.com/d3/d3-selection/blob/main/README.md#selection_node), and embed it in the outer literal.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4536,"value":"为了添加轴，我们先使用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元素中，然后再调用一次来删除域路径（为了极简主义风格）。最后我们通过调用[*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":"","database":"$undefined"},{"id":2950,"value":"Position is the strongest visual variable, so it’s not a coincidence that our discussion of scales has so far focused on position.\n\nYet scales can be used for other visual variables, such as color. 🌈","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4543,"value":"位置是最有力的可视变量，所以我们到目前为止我们的讨论聚焦于位置不是一个巧合。\n\n现在标尺可以用于其他的可视变量，比如颜色。🌈","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":"The code above defines a sequential scale, which is similar to a linear scale except instead of a range it relies on an interpolator. And an interpolator is a function which takes a value between 0 and 1, returning the corresponding visual value. Often, this interpolator is one of D3’s [built-in color schemes](/@d3/color-schemes).\n\nPassing this color scale a count returns the corresponding color string.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4545,"value":"上面的代码定义了一个顺序标尺，它类似于线性标尺，只是它依赖于插值器的范围。插值器是一个函数，它接收一个介于0到1的值，返回对应的可视化值。通常，此插值器是D3[内置的配色方案](/@d3/color-schemes)之一。\n\n传递一个计数给这个颜色标尺返回对应的颜色字符串。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":"Now we can add a redundant encoding to the bar chart, mapping *count* to *color* as well as *x*-position. To document the color encoding, similar to an axis for a positional encoding, we’ll import a [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":4549,"value":"现在我们可以向条形图太那几更多编码，与*x*-位置一样，映射*count*到*color*。为了记录颜色编码（类似于位置编码的轴），我们将导入[D3颜色图例](/@d3/color-legend)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":"Some visualizations require specialized graphical marks that aren’t built-in to SVG or Canvas. Next, we’ll go beyond basic bar charts and visit D3’s shapes.\n\nNext","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4554,"value":"一些可视化需要专门的图形标记，他们不是内置于SVG或Canvas。下面我们将超越基础条形图并查看D3的形状。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"---\n\n## Appendix","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":"$W46","stdlib":"1"}} 44:"$43:body"