3e:null 3f:["$","title",null,{"children":"Learn D3: Shapes | weifeng.zhang | Observable"}] 45:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1666589083482.879,"size":48822}] 43:{"id":"491f33cf5692d546","slug":null,"title":"Learn D3: Shapes","thumbnail":"b9f443d5549c652c3ca1b3a427d4ea23a0ec4391f1c1b3ee4ca305f27ca6b676","access_level":"public","create_time":"$D2022-10-24T05:24:43.482Z","update_time":"$D2022-10-24T10:36:06.059Z","view_time":null,"first_public_time":"$D2022-10-24T05:24:43.482Z","has_unpublished_edits":null,"fork":{"id":"91bc0a496747a34d","slug":"learn-d3-shapes","title":"Learn D3: Shapes","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":1184,"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: Shapes","cells":[{"id":0,"value":"# Learn D3: Shapes\n\nSVG and Canvas are intentionally generic; they allow for any type of graphic. D3 meanwhile is intended for visualization, and so provides a specialized vocabulary of *shapes* which are functions that generate path data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"SVG和Canvas有意通用；他们允许任意类型的图形。同时，D3用于可视化，并提供了专门的*shapes*词汇表，他们是生成路径的函数。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"Paths can draw circles, rectangles, lines, squiggles, swoops, tigers [🐅](https://commons.wikimedia.org/wiki/File:Ghostscript_Tiger.svg), and anything else you can imagine. A path’s shape is specified in the [SVG path data language](https://www.w3.org/TR/SVG/paths.html#TheDProperty) (or equivalent [Canvas path methods](https://html.spec.whatwg.org/multipage/canvas.html#canvaspath)), which is akin to commands you’d give an old-fashioned [pen plotter](https://en.wikipedia.org/wiki/Plotter). Such as:\n\n* Mx,y - move to the specified point [*x*, *y*]\n* Lx,y - draw a line to the specified point [*x*, *y*]\n* hx - draw a horizontal line of length *x*\n* vy - draw a vertical line of length *y*\n* z - close the current subpath","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1054,"value":"路径可以绘制圆形、长方形、线条、波浪线、俯冲、老虎[🐅](https://commons.wikimedia.org/wiki/File:Ghostscript_Tiger.svg)以及任何你可以想象的东西。路径的形状是在[SVG路径数据语言](https://www.w3.org/TR/SVG/paths.html#TheDProperty)中（或等效的[Canvas路径方法](https://html.spec.whatwg.org/multipage/canvas.html#canvaspath)）指定的。这类似于您为老式[笔绘图仪](https://en.wikipedia.org/wiki/Plotter)提供的命令。比如：\n\n* Mx,y - 移动到指定点 [*x*, *y*]\n* Lx,y - 绘制线到指定点 [*x*, *y*]\n* hx - 绘制长度为 *x* 的水平线\n* vy - 绘制长度为 *y* 的垂直线\n* z - 闭合当前子路径","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":381,"value":"Say we wanted to visualize several years of Apple stock price as a line chart. Here’s a dataset with *date* and *close* columns (with “close” referring to the price of the stock when the market closed), and the corresponding scales.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1074,"value":"假设我们想将苹果几年的股价可视化为折线图。下面是一个包含*日期*和*收盘价*列的数据集（“收盘价”是指市场收盘时股票的价格）和相应的刻度。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"data = FileAttachment(\"aapl-bollinger.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":91,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.upper)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"To draw the line, we need path data that starts with Mx,y to move to the first point, followed repeatedly by Lx,y to draw a line to each subsequent point. We could do this by looping over the points to concatentate.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"为了绘制折线，我们需要路径数据，它以M*x*,*y*开始，移动到第一个点，后面重复使用L*x*,*y*绘制到后续点的连线。我们可以通过循环遍历这些点来做到这一点。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":554,"value":"{\n let path = `M${x(data[0].date)},${y(data[0].close)}`;\n for (let i = 1; i < data.length; ++i) {\n path += `L${x(data[i].date)},${y(data[i].close)}`;\n }\n return path;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"But [d3.line](/@d3/d3-line) is more convenient. Calling d3.line returns a default line generator, and by calling *line*.x and *line*.y we can configure the line with functions to return the *x*- and *y*-position for a given data point *d*. These functions retrieve the desired abstract value (*date* or *count*) and convert it to visual position (by applying a scale).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"但是[d3.line]()更加方便。调用d3.line返回一个默认折线生成器，并且通过调用 *line*.x 和 *line*.y，我们可以通过返回点*d*的*x*-位置和*y*-位置的函数来配置折线。这些函数检索所需的抽象值（*date*或*count*）并将其转换为可视位置（通过应用标尺）。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"line = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.close))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"Passing the line generator the data returns the corresponding SVG path data string which can be used to set a path element’s *d* attribute.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"传递给折线生成器数据会返回对应的SVG路径数据字符串，它可以被用作路径元素的 *d* 属性。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":586,"value":"line(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"(To avoid repetition, I defined reusable axes in the appendix below. Each axis is a function that takes a selection of G elements to populate.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"（为了避免重复，我在下面的附录中定义了可重用轴。每个轴是一个函数，它需要选择 G 元素进行填充。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":688,"value":"The path above is styled with a blue stroke and no fill. To avoid misleading spikes caused by miter joins between line segments, I set the [miter limit](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit) to 100% of (1×) the stroke width. I could have used round line joins and caps, alternatively.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"上面的路径采用蓝色的描边且没有填充。为了避免线段之间的斜接连接导致误导性的尖峰，我将[斜接限制](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit)设置为描边宽度（1×）的100%。我们也可以使用圆形连接和caps。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"For an area chart, there’s similarly d3.area. An area’s shape is specified as two lines with shared *x*-values: *area*.y0 is the baseline and *area*.y1 is topline. For an area chart with a constant baseline along the chart’s bottom edge, we set *area*.y0 to *y*(0).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1101,"value":"对于面积图表来说，也有类似的 d3.area。区域的形状被指定为具有共享的 *x* 值的两条线：*area*.y0 是基线，*area*.y1 是上线。对于面积图有着固定的沿着下边缘的基线，我们设置 *area*.y0 为 *y*(0)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":300,"value":"area = d3.area()\n .x(d => x(d.date))\n .y0(y(0))\n .y1(d => y(d.close))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"If you want an area with a variable baseline—as in a [stacked area chart](/@d3/stacked-area-chart), a [streamgraph](/@d3/streamgraph), or the chart of [Bollinger bands](/@d3/bollinger-bands) below—pass *area*.y0 a function instead. As with *area*.x and *area*.y1, this function will be called for each data point to compute the corresponding *y*-value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1105,"value":"如果你想要个可变基线的区域（如[堆叠面积图](/@d3/stacked-area-chart)、[流线图](/@d3/streamgraph)或下面的[布林带图](/@d3/bollinger-bands)），将 *area*.y0 改为函数。与 *area*.x 和 *area*.y1 一样，将为每个数据点调用此函数来计算响应的 *y* 值。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"areaBand = d3.area()\n .x(d => x(d.date))\n .y0(d => y(d.lower))\n .y1(d => y(d.upper))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"To complete the display of Bollinger bands by showing the central moving average and the daily closing price, we can overlay lines on top. Since each path element can only have a single style, we use multiple paths for multiple colors.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"要通过显示中心移动平均线和每日收盘价来完成布林带的显示，我们可以在顶部叠加线。由于每个 path 元素只能有一个样式，因此我们对多种颜色使用多个路径。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":305,"value":"lineMiddle = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.middle))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"Lines and areas are designed to work together: you can derive the line corresponding to an area’s baseline or topline by calling *area*.lineY0 or *area*.lineY1, respectively. This is useful for decorating an area with a top or bottom stroke.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1116,"value":"折线和区域设计为协同工作：你可以通过分别调用 *area*.lineY0 和 *area*.lineY1 来获取对应于区域基线或顶线的线。这对于使用顶部或底部描边修饰区域非常有用。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"Lines and areas have more features we won’t cover here, but to hint at a few: [radial lines and areas](/@d3/d3-lineradial) are useful for cyclical data, such as [seasonal temperatures](/@d3/radial-area-chart); [curves](https://github.com/d3/d3-shape/blob/master/README.md#curves) provide configurable interpolation methods, such as monotonicity-preserving splines; and you can [show gaps for missing data](/@d3/area-with-missing-data).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"线和区域具有更多特征，我们不会在这里介绍，但要暗示一些：[径向线和区域](/@d3/d3-lineradial)对于周期性数据很有用，例如[季节性温度](/@d3/radial-area-chart);[曲线](https://github.com/d3/d3-shape/blob/master/README.md#curves)提供可配置的插值方法，例如保持单调性的样条曲线;并且您可以[显示缺失数据的间隙](/@d3/area-with-missing-data)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"Of course, visualization is not just bars, lines, and areas.\n\nAnother common shape is what D3 calls the *arc*, but what mathematicians would call an *annulus sector*. It features in [pie charts](/@d3/pie-chart), [donut charts](/@d3/donut-chart) and [sunbursts](/@d3/sunburst) (but not, confusingly, [arc diagrams](/@d3/arc-diagram)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1129,"value":"当然，可视化不仅仅有条形图、折线图和面积图。\n\n另一种常见的图形，D3称之为 *arc*，但是数学家称之为*环装扇形图*。它在[饼图](/@d3/pie-chart)，[圆环图](/@d3/donut-chart)和[旭日图](/@d3/sunburst)中具有特色（但是令人困惑的是，[弧形图](/@d3/arc-diagram)不是）。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"arc = d3.arc()\n .innerRadius(210)\n .outerRadius(310)\n .startAngle(([startAngle, endAngle]) => startAngle)\n .endAngle(([startAngle, endAngle]) => endAngle)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"Similar to how lines and areas are configured by *x* and *y*, an arc is configured by *innerRadius*, *outerRadius*, *startAngle*, and *endAngle* (with angles in radians). The arc generator above is configured to accept an array [*startAngle*, *endAngle*].","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"类似于折线和区域通过 *x* 和 *y* 配置，arc 通过 *innerRadius*、 *outerRadius*、*startAngle*、*endAngle*（角度以弧度为单位）配置。上面的 arc 生成器通过接受一个数组 [*startAngle*, *endAngle*] 配置。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":977,"value":"arc([Math.PI / 2, Math.PI]) // from 90° to 180°","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"viewof n = Inputs.range([1, 50], {value: 12, step: 1, label: \"n\"}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"Computing arc angles as above can be tedious for a pie or donut chart, so D3 provides [d3.pie](https://github.com/d3/d3-shape/blob/master/README.md#pies) for convenience. Recall the tasty fruits dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1144,"value":"像上面一样为饼状图或环形图计算弧度非常繁琐，所以D3提供了 [d3.pie](https://github.com/d3/d3-shape/blob/master/README.md#pies) 以方便使用。回想一下美味水果数据集。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":83,"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":937,"value":"By configuring a pie layout with a *value* accessor for the *count* property, we can compute the arc angles such that the angular span of each arc is proportional to its value, and together the arcs span contiguously from 0 to 2π.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1149,"value":"通过为 *count* 属性配置带有 *value* 访问器的饼图布局，我们可以计算弧角，使得每个弧的角度跨度与其值成正比，并且弧线的跨度从 0 到 2π连续地结合在一起。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"pieArcData = d3.pie()\n .value(d => d.count)\n (fruits)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"These objects, one per datum, can be passed to an arc generator with fixed radii to produce a donut chart. (And because I can’t resist showing off a *little* bit, I’ll apply padding and a corner radius.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"这些对象（每个基准面一个）可以传递到具有固定半径的弧生成器以生成环形图。（因为我忍不住要炫耀一下，所以我将应用填充和角圆角。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"arcPie = d3.arc()\n .innerRadius(210)\n .outerRadius(310)\n .padRadius(300)\n .padAngle(2 / 300)\n .cornerRadius(8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"Now that we’ve covered a handful of common data graphics, let’s see how to make them come alive!\n\nNext","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"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":185,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"height = 240","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"